Question

有没有办法只设置具有特定类的第一个元素？：first-child psuedo选择器似乎只适用于标签。

编辑：并非所有类都具有相同的父元素，因此：first-child不是一个选项。

Answer 1

您可以尝试这样：

<div>
    <p class="blue">1st</p>
    <div class="blue">2nd</div>
</div>
<div>
    <div class="blue">3rd</p>
    <div class="blue">4th</div>
</div>

所以这只会使第一个元素变为蓝色

同时检查:first-child pseudo-class

：first-child伪类匹配第一个元素其他元素的子元素。

Answer 2

.class-name:nth-of-type(1)

这应该是您想要的样式

JsFiddle example

Answer 3

这应该有效.classNamep:first-of-type

Answer 4

您需要仔细检查您的班级名称。可能会发生错字。

见fiddle。它向您显示:first-child即使对类选择器也有效。：）

代码：

<span class="spana">first</span>
<span class="spana">second</span>

.spana:first-child {
    background-color: #ddd;
}

Answer 5

使用nth-child()伪类选择器是一种很好的方法，所有主流浏览器都支持这种方法，包括IE9 +。

以下是HTML示例：

<div class="blue">Will be blue</div>    
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>
<div class="blue">Will not be blue</div>

CSS：

.blue:nth-child(1) {
    color: blue;
}

这将选择类名blue的第一个div。请记住，通过将1传递给伪类来选择第一次迭代，而不是像数组那样0。

nth-child()伪类还有其他关键特性;除了像我之前所示传递的数字之外，伪类还支持像even或odd这样的关键词。

//Applies styling to every even instance of the class .blue 
.blue:nth-child(even) {
    color: blue;
}

//Applies styling to every odd instance of the class .blue 
.blue:nth-child(odd) {
    color: blue;
}

这也可以进一步采取;公式可以表示样式应用于哪些元素。公式表示为an+b，其中a是要选择的元素的频率，b是偏移量。因此，公式3n+4将样式应用于第四个元素，以及除此之外的每个第三个元素。（4,7,10,13,16等......）以下是如何应用此功能的示例。

//Style every 6th instance of the class .blue, starting with the second element. (2, 8, 14, 20, 26).
.blue:nth-child(6n+2) {
    color: blue;
}

如果不需要偏移，则只需传入与以前相同的公式，最后删除偏移;传入4n就是一个例子。

我希望这会有所帮助，我觉得这个伪类非常强大，同样被很多人评价。

Answer 6

没有一流的选择器。

请参阅BoltClock的答案（CSS3 selector :first-of-type with class name?）

有一种解决方法，但它对我不起作用

样式第一个元素与类

6 个答案: