css 定义最后一个孩子,如何在CSS中选择具有特定类名的“最后一个孩子”？
- test1
- test2
- test3
- test4
如何选择具有类名称的“最后一个孩子”：list？
ul li.list:last-child{background-color:#000;}
我知道上面的例子不起作用，但是有什么类似的东西可以工作吗？
重要：
a)我不能使用ul li:nth-child(3)，因为它可能发生在第四或第五位。
b)没有JavaScript。
任何帮助将不胜感激，谢谢！
答案
我建议你利用这样一个事实：你可以为一个元素分配多个类，如下所示：
- test1
- test2
- test3
- test4
最后一个元素有像其兄弟姐妹一样的list类，但也有last类，你可以使用它来设置你想要的任何CSS属性，如下所示：
ul li.list {
color: #FF0000;
}
ul li.list.last {
background-color: #000;
}
另一答案
这可以使用属性选择器完成。
[class~='list']:last-of-type {
background: #000;
}
class~选择一个特定的整个单词。这允许您的列表项在需要时以各种顺序具有多个类。它仍然会找到确切的类“列表”并将样式应用于最后一个。
阅读有关属性选择器的更多信息
另一答案
您可以使用相邻的兄弟选择器来实现类似的功能，这可能有所帮助。
.list-item.other-class + .list-item:not(.other-class)
将使用类other-class在最后一个元素之后有效地定位紧随其后的元素。
另一答案
这是一个厚颜无耻的答案，但是如果你只受限于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;
}
- 0
- 1
- 2
- 0
- 1
- 2
- 3
另一答案
我想最正确的答案是：使用: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的所有元素
- test1
- test2
- test3
- test4
- test5
CSS
li{ display:none; }
li.hide ~ li{ display:block; }
这将消除将hide类添加到需要隐藏的所有元素的需要，因此我们只剩下一个类hide，它们统治它们。现在，您不需要使用无法使用类名的last-of-type。你必须重新思考你对事物进行分类的方法
另一答案
使用此选择器：ul > li:last-of-type。这将选择无序列表中的每个最后一个列表项(
)(- )。
答案的细分：我只从父元素(>)中选择一个无序列表(
- )的子(
- )，它是该类型的最后一个子(
- )。
您可以使用Id或类将选择器限制为某些无序列表。例如：ul.my-class > li:last-of-type将仅从该类的无序列表中选择最后一个
另一答案
$('.class')[$(this).length - 1]
要么
$( "p" ).last().addClass( "selected" );
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！