使用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>

- user782860

---

这将选择li和p，因为它们都是其父元素的第一个子元素。 - tuff

请编辑问题以反映您在评论中所说的内容。现在提出的问题非常模糊。“第一个后代”...是什么？为什么在评论中写“下面的确切HTML标记”时，你会写“这只是一个例子”？什么样的例子？在您的标记中，<div class="container">的第一个后代是ul元素，所以您是在问如何选择它，还是什么？所有这一切背后的实际需求是什么？ - Jukka K. Korpela

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()选择器的意义是“匹配任何不匹配该选择器的项目”，而不是“禁止该选择器在此规则中的匹配”。

- redShadow

---

不。有没有一种解决方案能够做出像.container (魔法CSS在这里) .example{ border: 1px solid blue }这样的效果。 - user782860

如果你用> * >替换( magic css here )，你就会得到你所要求的东西。 - redShadow

我喜欢通配符，但它并不完全保证他会得到他要求的内容。如果在.container和li.example之间有另一个包装器，它将会失效。 - tuff

哦，所以你想选择层次结构中的第一个？ - redShadow

还差一点。选择器必须以.container开头。 - user782860

这不完全是那样的，但就像你说的那样，这可能是我们能做到的最好的了。 - user782860

Answer 2

第一个直接子元素：

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

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

<ul>会增加一些复杂性，因为在.container和目标之间有一个节点。

- Lance

Answer 3

关于：

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

- Patrick JC

Answer 4

最简单的方法是：

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

- Chris Halcrow

Answer 5

如果您正在使用这个确切的标记，为什么在选择器中只限制于.container和.example类呢？

.container ul > li.example会选择您想要的内容，尽管它不符合您对类的限制。

(>是子选择器)

另一个符合所有限制的替代方案是：

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

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

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

- tuff

---

因为这只是一个例子。我正在尝试想出一些方法，使BEM CSS理念变得更好。 - user782860

我的第二个建议对你来说怎么样？ - tuff

谢谢您的帮助，但这不是我要问的。请查看第一个答案中的评论。 - user782860

我们能否对 .container 和第一个后代元素 .example 之间的包装层数做出任何假设？ - tuff