css - 如何选择页面中的最后一个元素？

Question

有没有办法用css选择特定元素的最后出现？

这是一个例子：DEMO

我试过last-child了，但这不是我想要的。我使用了这个类：

HTML：

<ul>
    <li><span>test</span></li>
    <li>
        <span>test</span>
        <span>test</span>
    </li>
</ul>
<div>
    <span>test</span>
    <span>test</span>
</div>
<p>
    <span>test</span>
    <span>red</span>
</p>

CSS：

span:last-child{
    color:red;
    font-weight:bold;
}

我希望最后一个span带有“红色”内容的内容是红色的。我怎么能用 css 做到这一点？

更新：last-of-type对于具有相同父母的元素， 有一个解决方案。但是不同的父母呢？

Answer 1

试试这个：（你应该知道父包装元素）

body > *:last-child > span:last-child{
    color: red;
}

工作小提琴