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

Question

我有一堆类名称为red的元素，但是似乎无法使用以下CSS规则选择class="red"的第一个元素：

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

该选择器有什么问题，我该如何纠正？

多亏了这些评论，我才知道该元素必须是其父元素的第一个子元素才能被选中，而事实并非如此。我具有以下结构，并且该规则失败，如注释中所述：

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

如何定位 red类的第一个孩子？

Answer 1

这是作者误解:first-child的原理的最著名例子之一。 Introduced in CSS2，:first-child伪类表示其父级的第一个子级。而已。有一个非常普遍的误解，认为它选择第一个与其余复合选择器指定的条件相匹配的子元素。由于选择器的工作方式（有关说明，请参见here），事实并非如此。

Selectors level 3 introduces a :first-of-type pseudo-class，代表其元素类型的同级元素中的第一个元素。 This answer通过插图说明: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;
}

...然后在覆盖规则中使用 the general sibling combinator ~来“撤消”第一个类之后的类的元素的样式：

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

现在，只有带有 class="red"的第一个元素将具有边框。

这是如何应用规则的说明：

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

没有规则适用；没有边框。
该元素没有类 red，因此将其跳过。
仅应用第一个规则；呈现红色边框。
该元素具有类 red，但是其父元素中没有任何具有类 red的元素。因此，不应用第二条规则，仅应用第一条规则，并且元素保留其边界。
这两个规则都适用；没有边框。
该元素具有类 red。它还带有至少一个其他类别为 red的元素。因此，两个规则都被应用，第二个 border声明将覆盖第一个规则，从而“撤消”它，可以这么说。


另外，尽管它是在选择器3中引入的，但通用同级组合器实际上得到了IE7和更高版本的很好支持，与 :first-of-type和 :nth-of-type()不同，后者仅受IE9及更高版本支持。如果您需要良好的浏览器支持，那么您很幸运。

实际上，同级组合器是该技术中唯一重要的组成部分，并且具有如此出色的浏览器支持，这一事实使该技术变得非常通用-除了类选择器之外，您还可以通过其他方式使它适应过滤元素：


您可以使用此方法来解决IE7和IE8中的 :first-of-type问题，只需提供类型选择器而不是类选择器即可（再次，在后面的部分中将详细介绍其不正确的用法）：

article > p {
    /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
}

article > p ~ p {
    /* Undo the above styles for every subsequent article > p */
}

您可以通过 attribute selectors或任何其他简单的选择器代替类进行过滤。
即使伪元素在技术上并不是简单的选择器，您也可以将此覆盖技术与 pseudo-elements结合使用。


请注意，为了使它起作用，您将需要事先知道其他兄弟元素的默认样式是什么，以便您可以覆盖第一个规则。另外，由于这涉及CSS中的重载规则，因此您无法使用与 Selectors API或 Selenium的CSS定位器一起使用的单个选择器来实现同一目的。

值得一提的是，选择器4引入了 an extension to the :nth-child() notation（最初是一个称为 :nth-match()的全新伪类），它使您可以使用 :nth-child(1 of .red)之类的东西来代替假设的 .red:first-of-class。作为一个相对较新的建议，尚无足够的可互操作的实现方式使其可以在生产现场使用。希望这会很快改变。同时，我建议的解决方法应适用于大多数情况。

请记住，此答案假设问题正在寻找具有给定类的每个第一个子元素。对于整个文档中复杂选择器的第n个匹配，既没有伪类，也没有通用的CSS解决方案-解决方案的存在在很大程度上取决于文档的结构。 jQuery为此提供了 :eq()， :first， :last等，但再次请注意 they function very differently from :nth-child() et al。使用Selectors API，您可以使用 document.querySelector()获得第一个匹配项：

var first = document.querySelector('.home > .red');

或将 document.querySelectorAll()与索引器一起使用以选择任何特定的匹配项：

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

尽管 Philip Daubmeier最初接受的答案中的 .red:nth-of-type(1)解决方案有效（该解决方案最初由 Martyn编写，但此后已删除），但是它的行为并不符合您的期望。

例如，如果您只想在原始标记中选择 p：

<p class="red"></p>
<div class="red"></div>

...那么您就不能使用 .red:first-of-type（等同于 .red:nth-of-type(1)），因为每个元素都是其类型的第一个（也是唯一）（分别为 p和 div），所以两个元素都将被匹配通过选择器。

当某个类的第一个元素也是其类型的第一个元素时，伪类将起作用，但这仅是巧合。 Philip的回答证明了这种行为。当您在该元素之前插入相同类型的元素时，选择器将失败。进行更新的标记：

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

将 .red:first-of-type应用于规则将起作用，但是一旦添加不带该类的另一个 p，则可以：

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

...选择器将立即失败，因为第一个 .red元素现在是第二个 p元素。