时间戳

首页 > 解决方案 > 如何使用 CSS 选择整个页面上的特定事件？

css - 如何使用 CSS 选择整个页面上的特定事件？

问题描述

我尝试过 :nth-of-type 和 :nth-child，但它们不适用于在整个页面上选择特定实例。例如，如果我想选择div.box下面的第 8 个元素（“平面”），我该怎么做？

<div>
 <div class="box">blueberry</div>
 <div class="box">cherry</div>
 <div class="box">pineapple</div>
 <div class="box">orange</div>
 <div class="box">grape</div>
</div>
<div>
 <div class="box">car</div>
 <div class="box">boat</div>
 <div class="box">plane</div>
 <div class="box">bike</div>
 <div class="box">motorcycle</div>
</div>

标签： css

解决方案

你可以用javascript来做到这一点。我不认为你可以用 CSS 完成这样一个特定的任务，但我不确定。

let base = document.getElementsByTagName("div");

let divs = [];
for (let i = 0; i < base.length; i++) {
  let elems = base[i].getElementsByTagName("div");
  for (let j = 0; j < elems.length; j++) {
    divs.push(elems[j])
  }
}
  
function findNElement(n) {
  return divs[n-1].textContent; // This is to return text. Remove .textContent to remove th element
}


console.log(findNElement(8));
<div>
 <div class="box">blueberry</div>
 <div class="box">cherry</div>
 <div class="box">pineapple</div>
 <div class="box">orange</div>
 <div class="box">grape</div>
</div>
<div>
 <div class="box">car</div>
 <div class="box">boat</div>
 <div class="box">plane</div>
 <div class="box">bike</div>
 <div class="box">motorcycle</div>
</div>

您可以使用此代码段来选择元素的 textContent 中的某个元素。

推荐阅读