在整个文档中匹配某种types的第一个/第n个元素
我如何指定:first-of-type整个文档的:first-of-type ？
我想对HTML的第一个<p>进行样式设置，而不pipe它在哪里（我不想写section p:first-of-type因为它可能位于不同的HTML文档的其他地方）。
p { background:red; } p:first-of-type { background:pink; } p:last-of-type { background:yellow; }
<body> <section> <p>111</p> <p>222</p> <p>333</p> </section> <p>444</p> <p>555</p> </body>
单凭CSS，这不幸是不可能的。 这个文档为:first-of-type伪类声明 ：
第
:first-of-type伪类表示一个元素，它是其父类元素的子元素列表中的第一个types的兄弟元素。
这意味着:first-of-type应用于与其父类相关的第一个元素，而不是文档的根（或本例中的body元素）。
JavaScript解决scheme
:first-of-type
我们可以通过引入一些JavaScript来实现这一点。 我们所需要的只是JavaScript的querySelector()方法，它从指定的select器中拉出第一个匹配的元素。
在这个例子中，我已经将您的:first-of-type伪类改为“first-of-type”类，然后使用JavaScript将此类添加到使用querySelector('p')返回的元素中：
document.querySelector('p').className += ' first-of-type';
p { background:red; } p.first-of-type { background: pink; }
<body> <section> <p>111</p> <p>222</p> <p>333</p> </section> <p>444</p> <p>555</p> </body>
