使用类选择div的前五个元素[重复]答案

【问题标题】：Select first five elements of a div using class [duplicate]使用类选择div的前五个元素[重复]
【发布时间】：2021-01-16 20:46:09
【问题描述】：

<div> 中的元素将是动态的类型和计数。我需要模糊前五个元素。无论是什么类型，如何选择.doc-container 类<div> 的前五个元素？

我已经看到我们可以使用 nth:child 但他们需要一些元素，例如 li:nth:child(2) 等。

有没有办法解决这个问题？

<div class="doc-container">
  <p>one</p>
  <h1>two<h1>
  <p>three</p>
  <span>four</span>
  <p>five<p>
  <h3>six</h3>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

这可能是我解决它的方法，它可能不是最好的。不使用库

console.log(Array.from(document.getElementsByClassName('doc-container')[0].children).slice(0, 5))

<div class="doc-container">
  <p>one</p>
  <h1>two</h1>
  <p>three</p>
  <span>four</span>
  <p>five</p>
  <h3>six</h3>
</div>

【讨论】：

【解决方案2】：

如果你想获取前两个元素，试试这个

.doc-container > :nth-child(-n+2){
  color: green;
}

<div class="doc-container">
   <p>one</p>
  <h1>two</h1>
  <p>three</p>
  <span>four</span>
  <p>five</p>
  <h3>six</h3>
   
 </div>

只需将 2 替换为您要选择的元素数量即可。

【讨论】：

【解决方案3】：

使用公式-n + 5，意思是“第五个元素及以下”。使用> 选择器，您只选择父级的直系后代。使用*:nth-child，无论类型如何，您都可以选择每个子元素。

.doc-container > *:nth-child(-n + 5) {
  filter: blur(10px);
}

<div class="doc-container">
  <p>one</p>
  <h1>two</h1>
  <p>three</p>
  <span>four</span>
  <p>five</p>
  <h3>six</h3>
</div>

【讨论】：