Question

有没有办法让我定位第三个div就是这个列表并为它应用一个新的CSS类？

尽可能使用CSS，JS或jQuery。（或其他任何人都能想到的）

<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>

Answer 1

没有CSS类这样的东西。 CSS有选择器。一种类型的选择器是类选择器。 HTML有类。

您可以组合任意数量的选择器。听起来你想要nth-child psuedo-class selector。

.item:nth-child(3) { }

Answer 2

没有“CSS类”这样的东西，更少的实例。你想要的是在属于某个类（在HTML标记中分配给它）的div个元素中定位第三个元素。

答案是这取决于周围环境。如果不知道这个div元素序列如何嵌套在其他元素中以及哪些元素（尤其是div元素可能出现在它之前），则无法定位所需元素。

例如，如果我们假设这些元素构成了像<div class=foo>...</div>这样的元素的内容，那么它很简单：

.foo > :nth-child(3) { /* CSS declarations here */ }

但是，某些旧版本的IE不支持:nth-child()伪类。

Answer 3

纯JavaScript解决方案

您可以使用getElementsByClassName：

// Gets the third element with the class "item"
element = document.getElementsByClassName("item")[2];
// Assigns a new class to it
element.setAttribute("class", "newclass");

Answer 4

如果你想要一个CSS解决方案而不是像

那样

div.item:nth-of-type(3) {
   /* Target 3rd div */
}

这不会添加课程，但会定位到第3 div

Demo

我不知道downvotes的用途，但也要确保将这些元素绑定在一个包装元素中，例如div，例如wrapper，这样选择器将

div.wrapper > div.item:nth-of-type(3) {
   /* Styles here */
}

Answer 5

使用jQuery：

$("div.item:eq(2)").addClass("test");

Demo

Answer 6

用简单的JS：

var items = document.getElementsByClassName("item");
myItem = items[2]; // as the first element is 0, third element is position 2 in the array;
myItem.setAttribute('class', 'myClass');

更短的方式是：

document.getElementsByClassName('item')[2].setAttribute('class', 'myClass');

你必须要小心这个方法和其他方法，因为如果页面上有其他东西与类“item”它也将计数，你可以做的最好的是将所有这些div包装在父div中，给那个父div一个ID或者其他东西，然后定位父div。

Answer 7

使用JQuery查找带有css selectors的班级'item'，请求3并添加班级：

$('.item:nth-of-type(3)').addClass('new-class');

Answer 8

像这样的马克 -

 <div id="div1" class="someclass">
        <img ... id="image1" name="image1" />
    </div>

您可以在javascript中执行此操作 -

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

并且可以在jQuery中使用addClass方法。

定位CSS类的特定实例

8 个答案: