如何选中指定div内首个p元素并忽略嵌套元素（规避:first-child）

使用CSS的:first-of-type伪类即可实现需求，它会匹配父元素下同类型元素中的第一个，不受父元素内其他类型子元素的新增或顺序变化影响，完美解决:first-child依赖首个子元素的局限。

实现代码 #

CSS

.test p:first-of-type {
  background-color: red;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="test">
    <p>hello</p> <!-- 这个p会被选中 -->
    <p>hello</p>
    <div>
      <p>hello</p> <!-- 此p属于子div的元素，不会被选中 -->
    </div>
  </div>
</body>
</html>

核心区别 #

• :first-child要求目标元素是父元素的第一个子元素，若.test下新增其他前置元素（如<h2>、<span>），原首个p会失去选中状态。
• :first-of-type仅针对父元素下所有<p>元素的第一个，无论父元素内有多少其他类型子元素，都能稳定选中目标p。

内容的提问来源于stack exchange，提问作者IOEnthusiast