如何在CSS中select具有特定类名的“最后一个孩子”？
<ul> <li class="list">test1</li> <li class="list">test2</li> <li class="list">test3</li> <li>test4</li> </ul> 如何selectclass级名称列表中的“最后一个孩子”？
<style> ul li.list:last-child{background-color:#000;} </style>
我知道上面的例子不起作用，但有什么类似的这个工作吗？
重要：
a）我不能使用ul li:nth-child(3) ，因为它可能发生在第四或第五位。
b）没有JavaScript。
任何帮助将不胜感激，谢谢！
我build议你利用这样一个事实，即可以将多个类分配给一个元素，如下所示：
<ul> <li class="list">test1</li> <li class="list">test2</li> <li class="list last">test3</li> <li>test4</li> </ul>
最后一个元素具有像它的兄弟姐妹一样的list类，但也有last类，您可以使用它来设置任何CSS属性，如下所示：
ul li.list { color: #FF0000; } ul li.list.last { background-color: #000; }
这可以使用属性select器来完成。
[class~='list']:last-of-type { background: #000; }
class~select一个特定的整个单词。 这允许您的列表项目有多个类，如果需要的话，以不同的顺序。 它仍然会find确切的类“列表”，并将样式应用到最后一个。
在这里看到一个工作示例： http : //codepen.io/chasebank/pen/ZYyeab
阅读关于属性select器的更多信息：
http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp
你可以使用相邻的兄弟select器来实现类似的东西，这可能会有所帮助。
.list-item.other-class + .list-item:not(.other-class)
将有效地将最后一个元素之后紧随的元素与类other-class 。
阅读更多： https ： //css-tricks.com/almanac/selectors/a/adjacent-sibling/
这是一个厚颜无耻的答案，但是如果仅限于CSS，并且能够在DOM中反转您的项目，则可能值得考虑。 它依赖于这样一个事实：虽然没有select器用于特定类的最后一个元素，但实际上可以对第一个元素进行样式化。 诀窍是使用flexbox以相反的顺序显示元素。
ul { display: flex; flex-direction: column-reverse; } ul > li.list { background-color: #888; } ul > li.list ~ li.list { background-color: inherit; }
<ul> <li class="list">0</li> <li>1</li> <li class="list">2</li> </ul> <ul> <li>0</li> <li class="list">1</li> <li class="list">2</li> <li>3</li> </ul>
我猜最正确的答案是：使用:nth-child （或在这个特定的情况下，其对应的:nth-last-child ）。 大多数只知道这个select器的第一个参数来获取基于n的计算项目的范围，但它也可以采取“任何CSSselect器”的第二个参数。
你的场景可以用这个select器来解决： li:nth-last-child(1 of .list)
但是，技术上正确并不意味着你可以使用它，因为这个select器现在只在Safari中实现。
进一步阅读：
不能在没有JS的列表中定位类名的最后一个实例。
但是，根据你想要达到的目的，你可能并不是完全没有运气的。 例如，通过使用下一个兄弟select器，我在这里最后一个.list元素之后添加了一个可视分隔符： http : .list
有一个解决方法（在特定情况下）到这个问题：
虽然这不能直接回答这个问题，但是这种思维方式实现相同目标的可能性很高：
比方说，我们去隐藏列表中低于索引3所有元素
<ul> <li>test1</li> <li>test2</li> <li class="hide">test3</li> <li>test4</li> <li>test5</li> </ul>
CSS
li{ display:none; } li.hide ~ li{ display:block; }
现场演示
这样就不需要为需要hide所有元素添加一个hide类，所以我们只剩下一个hide类，它们全部都是规则的。 现在，您不需要使用不能使用Class名称的last-of-type 。 你必须重新思考你的分类方法
使用这个select器： ul > li:last-of-type 。 这将select无序列表（ <ul> ）中的每个最后一个列表项（ <li> <ul> ）。
答案的分解：我只从父元素（ <ul> ）中select了作为其types（ <li> ）的最后一个子元素的无序列表（ <ul> ）的子元素（ <ul> ）。
您可以使用Id或类来将select器限制为某些无序列表。 例如： ul.my-class > li:last-of-type将只从该类的无序列表中select最后一个<li>
$('.class')[$(this).length - 1]
要么
$( "p" ).last().addClass( "selected" );
