html - 在 CSS 中嵌套子选择器

Question

我有这个 HTML:

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

我只想将 CSS 应用于元素“Foo”。我不想用一个特殊的类来标记每个顶级

。我有限的知识告诉我我应该能够做到这一点:

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

但是当我这样做时，样式也会应用于“Bar”。我以为 '>' 只指定直接子级，嵌套时它的工作方式不一样吗？我尝试做的事情是否可行？

Answer 1

I thought that '>' specifies only immediate children, does it not work the same way when it's nested?

它确实以同样的方式工作。由于您使用 .navbar > ul 将 ul 直接锚定到 .navbar，因此您的选择器适用于 li 仅直接指定特定 ul 的元素。

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

您需要在嵌套元素上手动取消此设置:

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