Question

我有这个HTML代码：

<div id="mydiv">
    [other divs]
    <div data-day="1">content</div>
    [other divs with data-day attribute]
    <div data-day="random">content</div>
    [other divs]
</div>

我想选择具有data-day属性的mydiv中的最后一个元素。我怎么能这样做？

#mydiv div[data-day]:last-child

我尝试了这个，但它没有用。

Answer 1

您的问题没有真正的 css-only解决方案。使用Javascript你可以做到这一点，我想。

last-child不起作用，因为它仅适用于其父级的最后一个元素在您的情况下：仅当它是最后一个元素，后面没有其他元素。
last-of-type不起作用，因为它只选择 types ，而不是属性或类。

解决方法：

使用手工具有某个属性的最后一个元素添加一个类：

<div id="mydiv"> <div></div> <div data-day="1">content</div> <div></div> <div data-day="random" class="last-data-day">content</div> <div></div> </div>

Answer 2

我做了一个快速的谷歌搜索，发现以下链接很有用：

CSS Tricks

Stack Overflow (User with same issue)

答案是：

:last-child仅在有问题的元素是容器的最后一个子元素时才有效，而不是特定类型元素的最后一个元素。为此，您需要:last-of-type

http://jsfiddle.net/C23g6/3/

如何选择css中的最后一个div

2 个答案: