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

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

工作小提琴