如何在CSS中选择具有特定类名的"最后一个孩子"？

Question

<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.

任何帮助将不胜感激,谢谢!

Answer 1

这可以使用属性选择器完成.

[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

Answer 2

这是一个厚颜无耻的答案,但是如果你只受限于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>

Answer 3

您可以使用相邻的兄弟选择器来实现类似的功能,这可能有所帮助.

.list-item.other-class + .list-item:not(.other-class)

将有效地定位在具有类的最后一个元素之后的紧跟随元素other-class.

点击此处了解更多信息:https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Answer 4

我建议你利用这样一个事实:你可以为一个元素分配多个类,如下所示:

<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;
}