使用:last-child类选择器 [英] Using :last-child with class selector
本文介绍了使用:last-child类选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想制作最后一个/第二个 .heading
。
I want to style the last/second .heading
.
<ul>
<li class="heading">Hello world</li>
<li>Hello world</li>
<li>Hello world</li>
<li class="heading">Hello world</li>
<li>Hello world</li>
</ul>
ul li.heading:last-child {
background: black;
}
或
ul li.heading:nth-child(2) {
background: black;
}
适用于我。为什么,如何应用样式到< li>
?看来伪类选择器不工作类选择器。
works for me. Why, and how can I apply styles to that <li>
? It seems pseudo-class selectors doesn't work with class selectors. Which is weird since I could've sworn I'd used it before.
推荐答案
这意味着你必须像这样编写代码:
That would mean that you would have to write your code like this:
<ul>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
<li class="heading">Hello world</li>
</ul>
和CSS:
ul li.heading:last-child {
background: black;
}
ul li.heading:nth-child(2) {
background: black;
}
否则,对于当前的html代码, >
Else, with your current html-code, you would write:
ul li.heading:nth-child(4) {
background: black;
}
ul li.heading:nth-child(1) {
background: black;
}
我理解你的想法,但lis与类headingisn' t第二个或最后一个孩子。
I understand your thought, but the lis with the class "heading" isn't the second or last child.
这篇关于使用:last-child类选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文