css - 如何在未知的多级<ul>中选择最后一个<li>

Question

是否可以仅选择最后一个 <li>在每个多级列表中？

<ul class="root">
    <li>no</li>            
    <li>no</li>            
    <li>yes</li>
</ul>

<ul class="root">
    <li>no</li>            
    <li>no</li>            
    <li>
        <ul>
            <li>no</li>            
            <li>yes</li>
        </ul>
    </li>
</ul>

​ jsfiddle 上的免费 Playground : http://jsfiddle.net/dizzyn/KMY3U/

Answer 1

是的，可以，使用 :last-child CSS 选择器..

My fiddle

CSS

ul li:last-child {
    color: #ff0000;
}​

li {
    color: #000000;
}​

您还可以使用这个:

CSS

ul li:nth-last-child(1) {
   color: #ff0000;
}

li {
   color: #000000;
}​

:last-child 选择器选择作为其父元素的最后一个子元素的每个元素。

注意:这是 CSS3 实现，因此某些浏览器会忽略这一点，但不会破坏任何内容，因为您只是更改颜色..