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 selector来选择li的最后一个元素（div）。

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

JS Fiddle

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/

li：最后一个孩子格式化内部div

3 个答案: