css 首个元素,类的第一个元素的CSS选择器

小编典典

这是作者误解:first-child工作方式的最著名例子之一。在CSS2介绍，该:first-child伪类表示其父的第一个孩子。而已。有一个非常普遍的误解，认为它选择第一个与其余复合选择器指定的条件相匹配的子元素。由于选择器的工作方式(请参阅此处以获取解释)，这根本不是事实。

选择器级别3引入了一个:first-of-type伪类，该伪类表示其元素类型的同级元素中的第一个元素。该答案通过插图说明了:first-child和之间的区别:first-of-type。但是，与一样:first-child，它不会查看任何其他条件或属性。在HTML中，元素类型由标记名称表示。在问题中，该类型为p。

不幸的是，没有类似的:first-of-class伪类可以匹配给定类的第一个子元素。我和Lea Verou为此(尽管是完全独立的)提出的一种解决方法是，首先将所需的样式应用于该类的所有元素：

/*

* Select all .red children of .home, including the first one,

* and give them a border.

*/

.home > .red {

border: 1px solid red;

}

…然后使用通用的同级组合器在覆盖规则中“撤消” 第一个元素之后的类的元素的样式：~

/*

* Select all but the first .red child of .home,

* and remove the border from the previous rule.

*/

.home > .red ~ .red {

border