匹配整个文档中某种类型的第一个/第n个元素-前端问题

Matching the first/nth element of a certain type in the entire document(匹配整个文档中某种类型的第一个/第n个元素)

本文介绍了匹配整个文档中某种类型的第一个/第n个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何指定整个文档的:first-of-type?

我想为 HTML 的第一个 <p> 设置样式，无论它位于何处(我不想写 section p:first-of-type 因为它可能位于不同 HTML 文档的其他位置).

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 伪类状态:

With CSS alone this unfortunately isn't possible. The documentation for the :first-of-type pseudo-class states:

:first-of-type 伪类表示一个元素，它是其父元素的子元素列表中其类型的第一个兄弟元素.

The :first-of-type pseudo-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"类，然后使用 JavaScript 将这个类添加到使用 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个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！