html - CSS 子组合器

Question

我想我没有得到 css子组合器

我正在尝试仅针对 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/

先谢谢了，

注意：我还尝试删除 > 之间的空格，但没有成功。

Answer 1

您使用它们很好，但是所有（正确标记的）<li>s 都是 s 的子级<ul>。您可以指定父级（在您的 jsFiddle 中body）：

body > ul > li

或者用更具体的情况反转样式：

li ul > li {
    color: black;
}

在 的情况下color，无论如何您都需要使用第二个选项，因为color它是继承的。这是更新的 jsFiddle。

Answer 2

您的规则针对任何列表的子列表项。您可以做的是创建第二条规则来重新着色其他子列表项。例如：

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

jsFiddle 示例

Answer 3

ul将匹配所有<ul>元素。因为每个<li>人都是其中一个人的孩子<ul>……</p>

您需要更具体地说明<ul>您的意思。也许为它添加一个类。

Answer 4

ul > li将选择li文档中的所有元素，因为它们都是元素的子ul元素。

如果你将一个类应用到父类中<ul class="top">，那么你可以使用ul.top > li.

Answer 5

添加班级

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/

Answer 6

编辑（解决）：

好的，所以我鼓起勇气。下面是错误的。

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

申请的时候发现：

div>ul>li{color:green}

所有的 lis 都变成了绿色......原来 li 神奇地继承了 li 的颜色（奇怪的行为，因为我假设内容有颜色：#000）

无论如何...您需要明确设置颜色：除了绿色以外的其他东西才能看到样式有效。

在这里摆弄

//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.