html - CSS:选择带有标签 itemprop 的第一个 div

Question

我有以下结构:

<div id="wrapper">
  <div></div>
  <div></div>
  <div itemprop="description"></div>
</div>
<div itemprop="description"></div>
<div></div>
<div></div>

如何只选择带有 itemprops=description 的第一个 div？或者如何选择#wrapper div 中的第 3 个 div？

Answer 1

如果可以，请向您希望定位的元素添加一个类，例如:

<div id="wrapper">
    <div></div>
    <div></div>
    <div class="{{target-class}}" itemprop="description"></div>
    <div itemprop="description"></div>
    <div></div>
</div>

然后使用您的“目标”类名称来选择相关元素。它更简洁，并且会在 DOM 发生更改时覆盖您。

我不建议使用 nth-child 定位一个元素，除非你专门定位一个元素，因为它是第 n 个元素。

另一种方法是通过定位元素之后的所有元素来定位该元素，例如

[itemprop="description"] {
    /* targeted */
}
[itemprop="description"] ~ [itemprop="description"] {
    /* not targeted */
}

您可以看到一个有效的例子 here