有沒有辦法選擇一個類的特定元素？

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"/>