如何在 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

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

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

将有效地定位类 other-class 的最后一个元素之后的紧随其后的元素。

在此处阅读更多信息：https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Answer 3

这是一个厚颜无耻的答案，但如果您仅限于 CSS 并且能够在 DOM 中反转您的项目，则可能值得考虑。它依赖于这样一个事实：虽然特定类的 last 元素没有选择器，但实际上可以设置 first 的样式。诀窍是然后使用 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 4

如果没有 JS，您无法定位列表中类名的最后一个实例。

但是，您可能不会完全失去 css 的运气，这取决于您想要实现的目标。例如，通过使用下一个兄弟选择器，我在您的最后一个 .list 元素之后添加了一个视觉分隔符：http://jsbin.com/vejixisudo/edit?html,css,output

Answer 5

$('.class')[$(this).length - 1] 

或

$( "p" ).last().addClass( "selected" );

Answer 6

我建议您利用这样一个事实，即您可以将多个类分配给一个元素，如下所示：

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