html - CSS 子コンビネータ

Question

次のように、li の最初のレベルだけをターゲットにしようとしています: ul > li { color: green; }

            <ul>
                <li>Home</li>
                <li>
                    Products
                    <ul>
                        <li>Product 1 </li>
                        <li>Product 2</li>
                        <li>Product 3</li>
                    </ul>
                </li>
                <li>Contact</li>
                <li>News</li>
            </ul>

http://jsfiddle.net/5vB3h/

よろしくお願いします。

注: > の間のスペースも削除しようとしましたが、うまくいきませんでした。

score 2 · Accepted Answer

あなたはそれらをうまく使っていますが、すべての（適切にマークアップされた）<li>s は s の子です<ul>。親を指定できます（jsFiddleでbody）：

body > ul > li

または、より具体的なケースでスタイルを逆にします。

li ul > li {
    color: black;
}

の場合、が継承colorされるため、とにかく 2 番目のオプションを使用する必要があります。更新された jsFiddle は次のとおりです。color

score 1 · Accepted Answer

ルールは、任意のリストの子リストアイテムを対象としています。できることは、他のサブリスト項目の色を変更する 2 つ目のルールを作成することです。例えば：

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

jsFiddle の例

score 0 · Accepted Answer

ulすべての<ul>要素に一致します。every<li>はいずれかの子であるため<ul>…</p>

<ul>どちらを意味するかをより具体的にする必要があります。おそらくそれにクラスを追加します。

score 0 · Accepted Answer

クラスを追加する

li {color: blue;}
/* ^ added because maybe initial property is color: inherit;
     If not, someone correct me */
ul.a > li { color: red; }

ulこの後、好きなクラスを追加します<ul class="a" ...

http://jsfiddle.net/5vB3h/7/

score 0 · Accepted Answer

ul > liliそれらはすべて要素の子であるため、ドキュメント内のすべての要素が選択されますul。

のように親にクラスを適用すると、<ul class="top">を使用できますul.top > li。

score -2 · Accepted Answer

編集（うまくいきました）：

さて、私はボールを上げました。下は間違っています。

ul:first-child > li { color: green; }

申請時に次のことがわかりました。

div>ul>li{color:green}

すべての lis は緑色になりました... li が魔法のように li の色を継承していることがわかりました (コンテンツに色があったと仮定すると、奇妙な動作:#000)

とにかく...スタイルが機能していることを確認するには、 color: を緑以外の何かに明示的に設定する必要があります。

ここでフィドル

//html

<div>
    <ul>
  <li>Home</li>
  <li>
    Products
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>News</li>
  </ul>
</div>

//css

li {color:black} //you have to have this (or something like * {color:black} OR body/html {color:black} as li seem to automatically inherit parent li color property
div>ul>li{ color: green; } //have to have parent.

html - CSS 子コンビネータ

6 に答える 6

クラスを追加する

Related

Reference