匹配整个文档中某个类型的第一个/第n个元素 [英] Matching the first/nth element of a certain type in the entire document
问题描述
如何指定整个文档的：first-of-type ？
HTML的第一个< p> ，没有它所在的位置（我不想写节p：
I want to style the first <p> of the HTML, no mater where it is located (I don't want to write section p:first-of-type because it may be located elsewhere in a different HTML document).
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 伪类 states ：
With CSS alone this unfortunately isn't possible. The documentation for the :first-of-type pseudo-class states:
of-type伪类表示一个元素，它是其父元素的子元素列表中其类型的第一个兄弟元素。
The
:first-of-typepseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.
这意味着：first-of-type 应用于它的父类型的第一个元素，而不是文档的根 body 元素。
This means that :first-of-type is applied to the first element of its type relative to its parent and not the document's root (or the body element, in this case).
通过引入一些JavaScript实现这一点。我们需要的是JavaScript的 querySelector（）方法，它从指定的选择器拉取第一个匹配的元素。
We can achieve this by introducing some JavaScript. All we need for this is JavaScript's querySelector() method, which pulls the first matching element from the selector specified.
在这个例子中，我改变了你的：first-of-type 伪类，而是一个first-of-type类，使用 querySelector（'p'）时返回的元素：
In this example I've altered your :first-of-type pseudo-class to instead be a class of "first-of-type", then used JavaScript to add this class to the element returned when using 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>
至于：nth-child 和：last-of-type ，我们可以使用类似的方法JavaScript给我们： querySelectorAll（）。此方法将所有匹配的元素拉入NodeList（类似于数组），然后我们可以通过索引遍历或选择特定的元素：
As for :nth-child and :last-of-type, we can instead make use of a similar method JavaScript gives us: querySelectorAll(). This method pulls all matching elements into a NodeList (which is similar to an array), which we can then iterate through or select specific elements from within through the index:
var elems = document.querySelectorAll('p');
// nth-of-type = NodeList[n - 1]
// e.g. to select the 3rd p element ("333"):
if (elems.length >= 2)
elems[2].className += ' nth-of-type';
// last-of-type = NodeList length - 1
if (elems.length)
elems[elems.length - 1].className += ' last-of-type';
p {
background:red;
}
p.nth-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>
注意，我已经在两个选择器周围添加了 if 语句，以确保elems NodeList有足够的元素，否则将抛出错误。
Note that I've included if statements around both selectors to ensure the elems NodeList has enough elements, otherwise an error will be thrown.
这篇关于匹配整个文档中某个类型的第一个/第n个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
