Question

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

所以...让我说我的html中有以下内容：

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

是否有一个选择器或其他东西我可以使用“狗”类而不是其他两个div对第二个div应用轻微变化？

提前致谢！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想选择课程div的所有.dog，但是可以将div，:not()和{{:first-of-type合并为:last-of-type。 1}}选择器（.dog:not(:first-of-type):not(:last-of-type)）。

＆＃13;

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

＆＃13;

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

＆＃13;

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。

Answer 4

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

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

有没有办法用类选择特定元素？

4 个答案: