css - 使用 CSS 选择第一个后代

Question

无论如何使用CSS只选择第一个后代。例如，无论如何要从 .container 元素开始并设置带有蓝色边框的 <li class="example"> 样式，而不是其中的 <p class="example"> ？

我知道在 CSS 中有很多替代方法。但是有没有办法用下面的确切代码来做到这一点？这意味着仅使用选择器类 .container 和 .example，将类 .container 保留在下面 HTML 中的确切位置，并使用下面的确切 HTML 标记。

<style>
    .container .example{
        border: 1px solid blue;
    }
</style>

<div>
    <div class="container">
        <ul>
            <li class="example"><p class="example"></p></li>
            <li class="example"><p class="example"></p></li>
        </ul>
    </div>
</div>

Answer 1

你的意思是“直接子选择器”吗？

.container > ul > li

..这是你的蓝色边框：

.container > ul > li {
    border: solid 1px #00f;
}

..仅使用类，您可以通过以下方式完成：

.container > * > .example{
    border: solid 1px #00f;
}

选择“层次结构中的第一个”

css2 方式（我认为仍然更强大）是添加边框.example并从中删除.example .example：

.example{
    border: solid 1px #00f;
}
.example .example{
    border: none;
}

在 CSS3 中，您可以这样做：

:not(.example) > .example{
    border: solid 1px #00f;
}

请注意，这也不会阻止.example > div > .example获得蓝色边框..但它保证不是.example另一个人的直接孩子.example会获得这种风格。

更新：从 .container 开始

怎么样.container :not(.example) > .example？

我不认为你可以用“干净”的 css 做得更好（即单一规则；无需重置等）。

选择器的意思not()是“匹配任何与选择器不匹配的项目”，而不是“禁止此选择器匹配规则中此处的某处”。

Answer 2

第一个直系子女：

.container ul > :first-child{
    border: 1px solid blue;
}

http://codepen.io/sprynm/pen/PpKBRe

由于和 目标<ul>之间有一个节点，因此增加了一些复杂性。.container

Answer 3

关于什么：

li.example:first-child {border: 1px solid blue;}

Answer 4

如果您正在使用该精确标记，为什么您仅限于选择器中的.container和.example类？

.container ul > li.example会选择你想要的，虽然它不符合你的班级限制。

（>是子选择器）

适合您所有限制的另一种选择是：

.container .example {
  border: 1px solid blue;
}

.container .example .example {
 border: none; 
}

它的局限性在于它显然不只选择第一个后代；它只是覆盖了所有非第一后代的样式。

Answer 5

最简单的方法是：

.container ul li{
    border: 1px solid blue;
}