Question

我想选择第一个项目，在这种情况下是一个列表项标签，其中包含类＆＃34; red＆＃34;。但是：即使未在CSS中指定标记，first-of-type也会将标记作为第一个条件考虑在内。

我希望在具有.red类的子项的父标记中首次出现，即使它与其兄弟节点具有相同的标记。在这种情况下，也许第一个类型不是正确的伪类？

CSS

.red:first-of-type {
    color: red;
}

HTML

<ul>
 <li class="red">Item (This is red)</li>
 <li class="red">Item</li>
 <li class="red">Item</li>
</ul>
<ul>
 <li>Item</li>
 <li class="red">Item (I also want this to be red)</li>
 <li class="red">Item</li>
</ul>

Link to jsFiddle

Answer 1

使用第一个选择器，您可以使用红色的red类绘制所有元素。对于第二个，您可以通过选择red类除第一个之外的每个元素来覆盖它。

ul li.red{ color: red; }
ul li.red ~ li.red{ color:black; }

选择类：相同html子标记的first-of-type

1 个答案:

JSFiddle