有没有办法选择一个类的特定元素？

Question

我需要将特定样式仅应用于该类的特定实例。

所以......让我们说在我的HTML我有以下几点：

<div class="dog">Text</div> 
<div class="dog">More text</div> 
<div class="dog">Even more text</div> 

是否有选择或东西我可以用一个微小的变化应用到第二个div与“狗”类，但不是其他两个divs？

在此先感谢！

Answer 1

您可以使用:nth-child()选择器。

.dog:nth-child(2) { 
 
    color: red; 
 
}

<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div>

---

如果你想与.dog类选择所有div S，但第一个和最后div是你可以结合:not()，:first-of-type和:last-of-type选择（.dog:not(:first-of-type):not(:last-of-type)）。

.dog:not(:first-of-type):not(:last-of-type) { 
 
    color: red; 
 
}

<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div> 
 
<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div> 
 
<div class="dog">Text</div> 
 
<div class="dog">More text</div> 
 
<div class="dog">Even more text</div>

Answer 2

添加这样<div class="dog second">More text</div> 你的CSS第二类是例如div.dog.second {color:red;}

Answer 3

你可以从jQuery的使用EQ选择：http://api.jquery.com/eq-selector/

如果你想避免的jQuery和javascript你可以看看：nth-​​child（）伪选择器，但是CSS3，并且旧的眉毛不支持CSS3 SERS。

Answer 4

如果你给一个元素一个id，然后在你的样式表中指定它，它应该工作。

<div class="dog" id="altered"/>