[英]Style first element with class
Is there a way to style only the first element with a specific class? 有没有一种方法可以为特定元素的第一个元素设置样式? The :first-child psuedo selector seems to only work on tags.
:first-child psuedo选择器似乎仅适用于标签。
EDIT: Not all classes have the same parent element so :first-child isn't an option. 编辑:并非所有类都具有相同的父元素,所以:first-child不是一个选项。
You may try like this: 您可以这样尝试:
<div>
<p class="blue">1st</p>
<div class="blue">2nd</div>
</div>
<div>
<div class="blue">3rd</p>
<div class="blue">4th</div>
</div>
So this will make only the first element as blue 因此,这只会使第一个元素变为蓝色
Also check :first-child pseudo-class 还要检查:first-child伪类
The :first-child pseudo-class matches an element that is the first child element of some other element.
:first-child伪类与一个元素匹配,该元素是某个其他元素的第一个子元素。
这应该工作.classNamep:first-of-type
You need to double check your class name. 您需要仔细检查您的班级名称。 A typo could happen.
可能会打错字。
See this fiddle . 看到这个小提琴 。 It shows you that
:first-child
works even with class selectors. 它表明
:first-child
即使与类选择器一起工作。 :) :)
Code: 码:
<span class="spana">first</span>
<span class="spana">second</span>
.spana:first-child {
background-color: #ddd;
}
Using the nth-child()
pseudo class selector is a good approach, this is supported in all major browsers, including IE9+. 使用
nth-child()
伪类选择器是一种很好的方法,所有主要浏览器(包括IE9 +)都支持此方法。
Here is the example HTML: 这是示例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>
And the CSS: 和CSS:
.blue:nth-child(1) {
color: blue;
}
This will select the first div of class name blue
. 这将选择类名称
blue
的第一个div。 Bare in mind that the first iteration is selected by passing 1
into the pseudo class, not 0
like arrays for example. 切记,通过将
1
传递给伪类而不是像数组那样的0
来选择第一次迭代。
There are also other key features of the nth-child()
pseudo class; nth-child()
伪类还具有其他主要功能; as well as passing in numbers like I have shown previously, the pseudo class also supports key words such as even
or odd
like so. 除了像我之前显示的那样传递数字外,伪类还支持诸如
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;
}
This can also be taken further; 这也可以进一步进行。 a formula can be expressed as to exactly which elements the styling is to be applied to.
可以将公式确切地表达为要应用样式的元素。 The formula is expressed
an+b
, where a is the frequency of the elements to select, and b is the offset. 该公式用
an+b
表示,其中a是要选择的元素的频率,b是偏移量。 So the formula 3n+4
will apply styling to the fourth element, and every third element beyond that. 因此,公式
3n+4
将样式应用于第四个元素,之后的每个第三个元素。 (4, 7, 10, 13, 16, etc...). (4、7、10、13、16等)。 Below is an example of how this can be applied.
下面是如何应用此示例。
//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;
}
If no offset is required then simply pass in the same formula as before, dropping the offset at the end; 如果不需要偏移量,则只需传递与以前相同的公式,然后在末尾放下偏移量即可; passing in
4n
is an example of this. 传递
4n
就是一个例子。
I hope this helps, I feel that this pseudo class is very powerful, and equally under rated by a lot of people. 我希望这会有所帮助,我觉得这个伪类非常强大,并且很多人都同样低估了它。
There is no first-of-class selector. 没有一流的选择器。
See BoltClock's answer ( CSS3 selector :first-of-type with class name? ) 请参阅BoltClock的答案( CSS3选择器:具有类名的第一个类型? )
There is a work around but it didn't work for me 周围有工作,但对我没有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.