Question

假设我有以下HTML

<div class="owl-item"></div>
<div class="owl-item"></div>
<div class="owl-item active"></div>
<div class="owl-item active"></div>
<div class="owl-item active"></div>
<div class="owl-item"></div>

我想选择类名为active的第3个div。我尝试了以下方法：

.owl-item.active:nth-child(3)

但这不起作用。在jQuery中，这可以使用$('.owl-item.active').eq(0)来完成，但它是纯粹的CSS

Answer 1

它没有孩子，

.owl-item.active:nth-child(3)

它不会工作。而是使用

.owl-item.active:nth-of-type(3)

Answer 2

您可以尝试其中任何一种

使用jQuery

jQuery(".owl-item.active:eq(2)")

使用javascript

document.querySelectorAll(".owl-item.active")[2]

无论你使用什么代码对css都很有用

.owl-item.active:nth-child(3)

Answer 3

这不起作用，因为元素不是其父元素的第三个子元素。您应该尝试PhotoViewAttacher imageAttacher; imageAttacher = new PhotoViewAttacher(imageView); imageAttacher.update();

Answer 4

有6种类型的元素，类包含“.owl-item”。有3种类型的元素，类包含“.owl-item.active”。

您应该尝试使用“nth-of-type”，因为所有元素都不是子元素。

参考：CSS Selectors

Answer 5

它不起作用，因为初始div正在关闭之后。

将它放在最后，它会起作用。

请在下面找到修改后的代码。

<style>
.owl-item.active:nth-child(3) {
  display: none;
}
</style>

<div class="owl-item">
    <div class="owl-item">1</div>
    <div class="owl-item">2</div>
    <div class="owl-item active">3</div>
    <div class="owl-item active">4</div>
    <div class="owl-item active">5</div>
    <div class="owl-item">6</div>
</div>

按类名获得第3个div

5 个答案: