在CSS中嵌套子选择器

Question

我有这个HTML：

<div class="navbar">
    <ul>
        <li>Foo
            <ul>
                <li>Bar</li>
            </ul>
        </li>
    </ul>
</div>

我想只将CSS应用于项目“Foo”。我不想标记每个顶级＆lt; li＆gt;有一个特殊的课程。我有限的知识告诉我，我应该能够做到这一点：

.navbar > ul > li  {
    text-transform: uppercase;
}

但是当我这样做时，风格也会应用到“Bar”。我以为'＆gt;'仅指定直接子项，嵌套时它是否以相同的方式工作？我正在努力做甚么可能吗？

Answer 1

  

我认为＆＃39;＆gt;＆＃39;只指定直接的孩子，它嵌套时的工作方式是否相同？

它以同样的方式工作。由于您已使用ul将.navbar直接锚定到.navbar > ul，因此您的选择器仅会直接应用于li元素{/ 1}}。

问题不在于选择器;这是text-transform, like most text properties, is inherited by default的事实。因此，即使您仅将样式应用于直接ul元素，嵌套的元素也会通过继承来接收它。

您需要在嵌套元素上手动反转：

li