在 CSS 中嵌套子选择器

【问题标题】：Nesting child selectors in CSS在 CSS 中嵌套子选择器
【发布时间】：2014-08-05 06:44:58
【问题描述】：

我有这个 HTML：

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

我只想将 CSS 应用于项目“Foo”。我不想用特殊的类标记每个顶级

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

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

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

【问题讨论】：

【解决方案1】：

我认为 '>' 只指定直接子级，嵌套时它的工作方式不一样吗？

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

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

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

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

【讨论】：