选择第一个使用 CSS 的后代

Question

无论如何，是否可以使用CSS仅选择第一个后代。例如，是否可以从 .container 元素开始并用蓝色边框样式

，而不是其中的

？

我知道在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;
}