定位 CSS 类的特定实例

Target specific instance of CSS class

本文关键字：实例 CSS 定位      更新时间：2023-09-26

有什么方法可以让我定位第三个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>

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

您可以组合任意数量的选择器。听起来你想要第 n 个孩子的伪类选择器。

.item:nth-child(3) { }

没有"CSS class"这样的东西，更不用说它的实例了。你想要的是针对属于某个类（在 HTML 标记中分配给它的div元素中的第三个。

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

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

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

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

纯 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");

使用 jQuery：

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

演示

如果你想要一个CSS解决方案，你可以像这样做

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

这不会添加类，但会针对第 3 个div

演示

我不知道反对票的用途是什么，但也要确保将这些元素绑定到包装元素中，例如div有类wrapper这样选择器将是

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

使用普通 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为目标。

使用 JQuery 查找带有 CSS 选择器的类"项目"，要求输入 3 个并添加类：

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

对于这样的马库- 

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

你可以在javascript中做到这一点

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

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

相关文章：