在 CSS 中嵌套子选择器

Posted 2023-03-06

【中文标题】在 CSS 中嵌套子选择器

【英文标题】：Nesting child selectors in 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;

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

【问题讨论】：

尝试 .navbar ul > li:first-child 。只是在这里猜测。

问题在于样式适用于整个 <li>（文本转换级联），而“子”<li> 是父级的一部分。跨度>

【参考方案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;