css - li:last-child 格式化内部 div

Question

警告...这里不是 CSS 工具箱中最锋利的工具...

我正在尝试使用 UL 编写树控件......并陷入了 CSS 问题。为了简化问题，我将示例归结为可能没有意义的内容，但 CSS 问题的本质是尽可能简单。

考虑这个html：

<ul>
    <li><div>should be green :)</div>
        <ul>
            <li><div>should be green :)</div></li>
            <li><div>should be red :)</div></li>
        </ul>
    </li>
    <li><div>should be red :)</div>
        <ul>
            <li><div>should be green !!!!!!!!!!!!</div></li>
            <li><div>should be red :)</div></li>
        </ul>
    </li>
</ul>

这个CSS：

ul li{
    background-color: green;
}

ul li:last-child div{
    background-color: red;
}

一项说：

<li><div>should be green !!!!!!!!!!!!</div></li>

显示为红色而不是绿色！！！！！！！

由于包含它的 div 包含在不是列表中最后一个的 LI 中，我希望它使用普通选择器而不是最后一个子选择器

这里有一个小提琴为你的声誉点寻求乐趣！

http://jsfiddle.net/dmd1214/5Vm58/16/

Answer 1

您需要使用Child 选择器来选择li.

ul li:last-child > div{
    background-color: red;
}

JS小提琴

Answer 2

使您的后代选择器成为子选择器：

ul li:last-child > div {
    background-color: red;
}

这样，它只匹配<div>最后一个元素的子<li>元素。

演示：http: //jsfiddle.net/5Vm58/20/

Answer 3

这是因为你的目标是div你的:last-child使用。

ul  li {
    background-color: green;
}

ul li:last-child {
    background-color: red;
}

小提琴：http: //jsfiddle.net/5Vm58/19/