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

Answer 2

对于这个特定情况：

#wrapper > div:nth-child(3)

虽然标记可能会改变，但如果可能的话，更好的选择是使用类或id。

Answer 3

以下是使用一些高级选择器的CSS选项。

选项1

由于#wrapper中目前只有1个itemprop div，所以只需使用itemprop属性选择div - working fiddle

#wrapper div[itemprop="description"] { // your style }

选项2

这将选择最后一个子元素，前提是它是div

#wrapper div:last-of-type { // your style }

选项3

正如其他人指出你可以使用：nth-child（）选择器。如果#wrapper中的div数量会有所不同，我不建议这样做。

#wrapper div:nth-child(3) {
  // your style
}

选项4

如果你要在包装器中有多个itemprop div，你可以通过选择兄弟姐妹取消样式。但是，这只适用于#wrapper中的itemprop div。

#wrapper div[itemprop="description"] { // your style }
#wrapper div[itemprop="description"] ~ div[itemprop="description"] { // cancel out styling }

CSS：选择带有标记itemprop的第一个div

3 个答案:

选项1

选项2

选项3

选项4