html - 使用 CSS 获取父级下的类的最后一个实例

Question

有没有办法在相同的元素中选择特定类型类的nth-child或last-child？

即

如果我使用 .small:last-child 或 ul .small:last-child 该属性只会影响第二个列表的最后一个元素。有没有我可以用来选择每个列表中 small 的最后一个实例的选择器？

<ul>
    <li class="small">List Item</li>
    <li class="small">List Item</li>
    <li class="medium">List Item</li>
    <li class="large">List Item</li>
</ul>
<ul>
    <li class="medium">List Item</li>
    <li class="large">List Item</li>
    <li class="small">List Item</li>
    <li class="small">List Item</li>
</ul>

请参阅 fiddle CSS Line 72 以供引用

http://jsfiddle.net/j7wq12v2/

Answer 1

:last-child 仅当相关元素是容器的最后一个子元素而不是特定类型元素的最后一个时才有效。我们可以使用 last-of-type

不幸的是，last-of-type 无法找到最后一个 .class。

我们需要使用javascript来实现这个结果。