1

以下は私のHTMLです

<ul>
<li>title1
    <ul>
        <li>subtitle1.1</li>
        <li>subtitle1.2</li>
    </ul>
</li>
<li>title2
    <ul>
        <li>subtitle2.1</li>
        <li>subtitle2.2</li>
    </ul>
</li>
</ul>

そしてここにCSSがあります

        ul > li {
            color: red;
        }

私はただ期待していてtitle1、title2赤くなりました。しかし、すべての兄弟要素、つまり、、、subtitlle1.1は赤になりました。subtitlle1.2subtitlle2.1subtitlle2.2

子コンビネータは子にのみ影響するはずですが、ここの兄弟は最上位の子のプロパティを継承しています。舞台裏で何が起こっているのか、もう少し詳しく教えていただけますか？そして、上のタイトル部分だけを赤にしたい場合、cssはどのように見えるべきですか？

4

3 に答える 3

4

このスタイルは、字幕が外側のリスト内にあるためではなく、独自のリストの直接の子であるため、字幕にも適用されます。

マークアップが与えられ、他の情報がないため、リストの最初のレベルのみをターゲットにできるセレクターはありません。

リストが別の要素の内部にあることがわかっている場合は、直接の子コンビネータを使用して、外部リストをターゲットにすることができます。

div > ul > li {
  color: red;
}

内部リストのスタイルをオーバーライドできます。

ul > li {
  color: red;
}
ul > li > ul> li {
  color: black;
}

IDまたはクラスを外部リストに追加できる場合は、それを使用してターゲットにすることができます。内部リストにはそのIDまたはクラスがないため、適用されません。

.myList > li {
  color: red;
}
于 2013-02-09T14:33:58.583 に答える
1

舞台裏

これは、colorプロパティがデフォルトで継承されているためです。したがって、一番上の要素（たとえば<body>）に色を定義すると、このプロパティをオーバーライドしないすべての子に適用されます。これは、CSSの中心となるカスケードメカニズムに不可欠です。

ソリューション

問題を解決するには、次のいずれかを実行できます。

HTMLソリューション：セマンティックを追加

まず、テキストを次のタグにラップします（おそらくクラス属性を追加します）：

<ul>
  <li><span class="term">title1</span>
    ...
  </li>
    ...
</ul>

次に、色を定義します。

ul > li > span,
ul .term {
  color: red; # only apply to the span
}
  • プロ：セマンティックを追加し、CSSをより効率的に使用します;
  • 短所：ソートされていないリスト（<ul>）の使用は実際には適応されていません。定義リスト（ ）の使用をお勧めします<dl>。

CSSソリューション：プロパティをオーバーライドします

あなたは単にあなたが望むどんな色でも字幕を使うように強制することができます：

ul > li > ul > li {
  color: black; # back to default document color
}
  • プロ： CSSのみ;
  • 短所：ルールを追加し、読みやすさを低下させます。
于 2013-02-09T14:59:36.090 に答える
0

タイトルのタグラッパーを追加し、次のようにスタイルを設定します。

<ul>
<li><span>title1</span>
    <ul>
        <li>subtitle1.1</li>
        <li>subtitle1.2</li>
    </ul>
</li>
<li><span>title2</span>
    <ul>
        <li>subtitle2.1</li>
        <li>subtitle2.2</li>
    </ul>
</li>
</ul>

この場合のCSSは次のようになります。

ul > li > span {
    color: red;
}

このようにすると、title1とtitle2だけが赤になります。

于 2013-02-09T14:36:28.467 に答える