如何在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" );