如何在CSS中选择具有特定类名的“最后一个孩子”？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在CSS中选择具有特定类名的“最后一个孩子”？相关的知识，希望对你有一定的参考价值。
<ul>
<li class="list">test1</li>
<li class="list">test2</li>
<li class="list">test3</li>
<li>test4</li>
</ul>
如何选择具有类名称的“最后一个孩子”：list？
<style>
ul li.list:last-child{background-color:#000;}
</style>
我知道上面的例子不起作用，但是有什么类似的东西可以工作吗？
重要：
a）我不能使用ul li:nth-child(3)，因为它可能发生在第四或第五位。
b）没有javascript。
任何帮助将不胜感激，谢谢！
我建议你利用这样一个事实：你可以为一个元素分配多个类，如下所示：
<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;
}
这可以使用属性选择器完成。
[class~='list']:last-of-type {
background: #000;
}
class~选择一个特定的整个单词。这允许您的列表项在需要时以各种顺序具有多个类。它仍然会找到确切的类“列表”并将样式应用于最后一个。
在这里查看一个工作示例：http://codepen.io/chasebank/pen/ZYyeab
阅读有关属性选择器的更多信息
http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp
您可以使用相邻的兄弟选择器来实现类似的功能，这可能有所帮助。
.list-item.other-class + .list-item:not(.other-class)
将使用类other-class在最后一个元素之后有效地定位紧随其后的元素。
在这里阅读更多：https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
这是一个厚颜无耻的答案，但是如果你只受限于CSS而且能够在DOM中反转你的项目，那么可能值得考虑。它依赖于这样的事实：尽管特定类的最后一个元素没有选择器，但实际上可以对第一个元素进行样式化。诀窍是然后使用flexbox以相反的顺序显示元素。
ul {
display: flex;
flex-direction: column-reverse;
}
/* Apply desired style to all matching elements. */
ul > li.list {
background-color: #888;
}
/* Using a more specific selector, "unstyle" elements which are not the first. */
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）。大多数人只知道这个选择器的第一个参数是基于n的计算来获取一系列项目，但它也可以采用“[任何CSS选择器]”的第二个参数。
您可以使用此选择器解决您的方案：li:nth-last-child(1 of .list)
但是技术上的正确并不意味着你可以使用它，因为这个选择器现在只在Safari中实现。
进一步阅读：
如果没有JS，您无法在列表中定位类名的最后一个实例。
但是，根据您想要实现的目标，您可能不会完全失去运气。例如，通过使用下一个兄弟选择器，我在这里的最后一个.list元素之后添加了一个可视分隔符：http://jsbin.com/vejixisudo/edit?html,css,output
There is a workaround (in specific situations) to this problem:
虽然这不能直接回答这个问题，但这种思维方式很可能达到同样的目标：
让我们说我们去隐藏列表中低于索引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; }
Live Demo
这将消除将hide类添加到需要隐藏的所有元素的需要，因此我们只剩下一个类hide，它们统治它们。现在，您不需要使用无法使用类名的last-of-type。你必须重新思考你对事物进行分类的方法
使用此选择器：ul > li:last-of-type。这将选择无序列表中的每个最后一个列表项（<li>）（<ul>）。
答案的细分：我只从父元素（>）中选择一个无序列表（<ul>）的子（<li>），它是该类型的最后一个子（<ul>）。
您可以使用Id或类将选择器限制为某些无序列表。例如：ul.my-class > li:last-of-type将仅从该类的无序列表中选择最后一个<li>
$('.class')[$(this).length - 1]
要么
$( "p" ).last().addClass( "selected" );
以上是关于如何在CSS中选择具有特定类名的“最后一个孩子”？的主要内容，如果未能解决你的问题，请参考以下文章