html - CSS 子组合器

Question

我想我没有得到 css child combinators .

我试图只针对 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 是 <ul> 的 child 秒。您可以指定父级(在您的 jsFiddle 中，body):

body > ul > li

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

li ul > li {
    color: black;
}

在color的情况下，无论如何你都需要使用第二个选项，因为 color是继承的。 Here's the updated jsFiddle.