css - 有没有办法选择带有类的特定元素？

Question

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

所以...假设我的 html 中有以下内容:

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

是否有选择器或其他东西可以用来对带有“dog”类的第二个 div 应用轻微的变化，而不是其他两个 div？

提前致谢!

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，但是第一个和最后一个 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>