css - 如何在css中选择最后一个div

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>

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

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

我试过这个，但没有用。

Answer 1

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

last-child不起作用，因为它只适用于其父元素的最后一个元素。
在您的情况下:仅当它是最后一个元素且后面没有其他元素时。

last-of-type不起作用，因为它只按类型选择，而不是按属性或类选择。

解决方法:

手动将类添加到具有特定属性的最后一个元素:

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