CSS :: 列表项上的最后一个子项
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11326915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: :last-child on list item
提问by user1355300
If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child?
如果 ul 具有多个类的 li 项,是否可以使用 :last-child 获取特定类的最后一项?
For example, consider following:
例如,请考虑以下内容:
<ul class="test">
<li class="one">
<li class="one">
<li class="one">
<li class="two">
<li class="two">
</ul>
I want to add some style to the last li having class "one" (ie. third in the list).
我想为最后一个 li 添加一些样式,类为“one”(即列表中的第三个)。
I tried following and it does not work.
我试过跟随,但它不起作用。
ul.test li.one:last-child
回答by Rob W
That's not possible yet.
这是不可能的还。
:last-child
selects the last child, regardless of the tag name, etc.- The possible alternative,
:last-of-type
selects the last occurrence of a tag. It ignores the class name, etc.
:last-child
选择最后一个孩子,而不管标签名称等。- 可能的替代方法是
:last-of-type
选择最后一次出现的标签。它忽略类名等。
Your only option is to add a specific class name to that element, or use JavaScript to add this class name.
您唯一的选择是向该元素添加特定的类名,或使用 JavaScript 添加此类名。
回答by Sowmya
Instead of giving class for each li, you can go for nth child where you can assign the style by li number.
您可以选择第 n 个孩子,而不是为每个 li 上课,您可以在其中按 li 编号分配样式。
If you want to give the separate css for your 3rd li then you need to write
如果你想为你的第三个 li 提供单独的 css 那么你需要写
li:nth-child(3) {
color: green;
}
回答by SVS
You can do it using jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/
您可以使用 jquery 做到这一点:http: //jsfiddle.net/surendraVsingh/HyAhL/2/
Jquery code:
查询代码:
var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');