css - 李 :last-child formatting an inner 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 中，我希望它使用普通选择器而不是最后一个子选择器

这里有一个 fiddle ，为你的声望点寻欢作乐!

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

Answer 1

您需要使用 Child selector用于选择 li 的最后一个元素 (div)。

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

JS Fiddle