Css - 如何选择页面上的第一个类型[重复]答案

【问题标题】：Css - how to select the first of type on page [duplicate]Css - 如何选择页面上的第一个类型[重复]
【发布时间】：2015-04-29 17:14:25
【问题描述】：

我的大部分网页都有 H2，显然还有 H1。

H2 可以在 divs/articles/sections 等内部 - 换句话说，没有保证结构。

这是一个典型的场景：

<h1></h1>
<section>
    <h2>I want this one</h2>
    <p></p>
</section>
<section>
    <h2>But not this one</h2>
    <p></p>
</section>

我想要一个始终保证页面上第一次出现的选择器 - 在这种情况下，无论它可能是第一个 H2。

我查看并尝试了 first-of-type 选择器，但发现它适用于自己的容器，因此这里选择了每个 H2，因为它是其父部分标记中的第一个。

肯定在 2015 年，我们能够做到这一点。

【问题讨论】：

【解决方案1】：

使用 jquery。老实说，我尝试了仅使用 css 的方法，但失败了。顺便说一句，很好的问题。

<script>
$(document).ready(function(){
$( "h2:first" ).css( "color", "red" );
});

</script>

【讨论】：

【解决方案2】：

您可以简单地使用 css 选择器first-of-type

定义和用法 :first-of-type 选择器匹配每个元素这是其父级的第一个特定类型的子级。

提示：这与 :nth-of-type(1) 相同。

h2:first-of-type {
    color: red;
}

或作为 jQuery 解决方案：

$('h2').first().css('color','red');

【讨论】：