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

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 实现，所以一些浏览器会忽略它，但不会破坏任何东西，因为你只是改变颜色..