如何使用 CSS 选择整个文档中特定元素类型的第一个实例？-css教程-PHP中文网

如何使用 CSS 选择整个文档中特定元素类型的第一个实例？

Linda Hamilton

发布： 2024-12-08 22:52:12

原创

618 人浏览过

How to Select the First Instance of a Specific Element Type in an Entire Document Using CSS?

匹配文档中任意位置特定类型的第一个元素

问题：

如何指定第一个元素整个文档中特定元素类型的实例，使用CSS？

答案：

常规 CSS 不允许匹配整个文档中特定类型的第一个元素。这是因为 :first-of-type 伪类仅适用于相对于其父级而不是文档根的元素。

您可以使用 JavaScript 的 querySelector() 方法来近似 :first-of-type 的功能，该方法从指定的选择器中检索第一个匹配的元素。下面是一个示例：

document.querySelector('p').className += ' first-of-type';

登录后复制

p {
  background: red;
}

p.first-of-type {
  background: pink;
}

登录后复制

此代码将“first-of-type”类分配给第一个

类。文档中的元素，允许您独立设置样式：

<body>
  <section>
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </section>
  <p>444</p>
  <p>555</p>
</body>

登录后复制

以上是如何使用 CSS 选择整个文档中特定元素类型的第一个实例？的详细内容。更多信息请关注PHP中文网其他相关文章！