如何在CSS中选择具有特定类名的“最后一个子元素”?

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

How do I select the "last child" with the class name: list?

如何选择具有类名“list”的“last child”?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

I know the example above doesn't work, but is there anything similar to this that does work?

我知道上面的例子不起作用，但是有什么类似的东西起作用吗?

IMPORTANT:

重要的是:

a) I can't use ul li:nth-child(3), because it could happen that it's on the fourth or fifth place too.

a)我不能用ul li:nth-child(3)，因为它可能发生在第四或第五名。

b) No JavaScript.

b)没有JavaScript。

Any help would be appreciated, thanks!

如有任何帮助，我们将不胜感激，谢谢!

9 个解决方案

#1

I suggest that you take advantage of the fact that you can assign multiple classes to an element like so:

我建议您利用这样一个事实:您可以将多个类分配给一个元素:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

The last element has the list class like its siblings but also has the last class which you can use to set any CSS property you want, like so:

最后一个元素有list类和它的兄弟类一样，但是也有最后一个类可以用来设置任何CSS属性，比如:

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}

#2

This can be done using an attribute selector.

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

[class~='list']:last-of-type  {
    background: #000;
}

The class~ selects a specific whole word. This allows your list item to have multiple classes if need be, in various order. It'll still find the exact class "list" and apply the style to the last one.

类选择一个特定的整字。这允许您的列表项有多个类(如果需要的话)，以不同的顺序。它仍然会找到确切的类“list”并将样式应用到最后一个。

See a working example here: http://codepen.io/chasebank/pen/ZYyeab

这里有一个工作示例:http://codepen.io/chasebank/pen/ZYyeab。

Read more on attribute selectors:

阅读更多关于属性选择器的内容:

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

#3

You can use the adjacent sibling selector to achieve something similar, that might help.

您可以使用相邻的同胞选择器来实现类似的操作，这可能会有所帮助。

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

Will effectively target the immediately following element after the last element with the class other-class.

将有效地针对与类otherclass在最后一个元素之后的紧接着的元素。

Read more here: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

阅读更多:https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

#4

This is a cheeky answer, but if you are constrained to CSS only and able to reverse your items in the DOM, it might be worth considering. It relies on the fact that while there is no selector for the last element of a specific class, it is actually possible to style the first. The trick is to then use flexbox to display the elements in reverse order.

这是一个厚颜无耻的回答，但是如果您仅局限于CSS，并且能够在DOM中反转您的项目，那么这可能是值得考虑的。它依赖于这样一个事实，即虽然特定类的最后一个元素没有选择器，但实际上可以对第一个元素进行样式化。诀窍是使用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>

#5

I guess that the most correct answer is: Use :nth-child (or, in this specific case, its counterpart :nth-last-child). Most only know this selector by its first argument to grab a range of items based on a calculation with n, but it can also take a second argument "of [any CSS selector]".

我猜最正确的答案是:Use:nth-child(或者，在这个具体的例子中，它的对应词是:nth-last-child)。大多数人只知道这个选择器，它的第一个参数是基于n的计算获取一系列项，但是它也可以取第二个参数“任何CSS选择器”。

Your scenario could be solved with this selector: li:nth-last-child(1 of .list)

您的场景可以使用这个选择器来解决:li:n -last-child(.list的1)

But being technically correct doesn't mean you can use it, though, because this selector is as of now only implemented in Safari.

但是，技术上正确并不意味着您可以使用它，因为这个选择器目前只在Safari中实现。

For further reading:

进一步阅读:

• https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
• https://drafts.csswg.org/selectors-4/ the-nth-child-pseudo
• http://caniuse.com/#search=nth-child
• http://caniuse.com/搜索= nth-child

#6

You can't target the last instance of the class name in your list without JS.

如果没有JS，就不能将类名的最后一个实例作为目标。

However, you may not be entirely out-of-css-luck, depending on what you are wanting to achieve. For example, by using the next sibling selector, I have added a visual divider after the last of your .list elements here: http://jsbin.com/vejixisudo/edit?html,css,output

然而，你可能并非完全不走运，这取决于你想要达到的目标。例如，通过使用下一个同胞选择器，我在这里的.list元素的最后一个后面添加了一个可视分隔符:http://jsbin.com/vejixisudo/edit?html、css、输出

#7

There is a workaround (in specific situations) to this problem:

While this doesn't answer the question directly, there is a high probability this way of thinking achieves the same goal:

虽然这并不能直接回答问题，但这种思维方式达到同样目标的可能性很大:

Lets say we went to hide all elements in the list that are lower than index 3

假设我们将列表中所有低于索引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

This will get rid of the need to add a hide class to all elements which needs to be hidden, so we are left with just one class, hide, which rules them all. now, you don't need to use the last-of-type which cannot work with Class names. you must re-think your approach of classifying things

这将消除向所有需要隐藏的元素添加隐藏类的需要，因此只剩下一个类，hide，它控制所有元素。现在，您不需要使用不能处理类名的last-of-type。你必须重新考虑你的分类方法。

#8

Use this selector: ul > li:last-of-type . This will select every last list item (<li>) in an unordered list (<ul>).

使用这个选择器:ul > li:last-of-type。这将在无序列表中选择最后一个列表项(

) (

)。

)()。

Breakdown of the answer: I'm selecting only the child (>) of an unordered list (<ul>) that is the last child of its type (<li>) from the parent element (<ul>).

分解答案:我只选择无序列表(

)的子元素(
• )，它是其类型的最后一个子元素(
  )。

• ),它是其类型的最后一个子元素()。

You can use an Id or class to restrict the selector to certain unordered lists. For example: ul.my-class > li:last-of-type will choose the last <li> only from the unordered lists of that class

可以使用Id或类将选择器限制为某些无序列表。例如:ul。my-class > li:last-of-type将仅从该类的无序列表中选择最后的

。

。

#9

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

or

或

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