Question

我希望最后一个列表项具有不同的颜色。我该如何正确地解决它？

HTML

<div class="wrap">
    <ul>
        <a><li>AAAA</li></a>
        <a><li>BBBB</li></a>
        <a><li>CCCC</li></a>
    </ul>
</div>

CSS

.wrap li{
    color: green;
    background: blue;

}

.wrap li:last-child{
    color: red;
    background: yellow;
}

Answer 1

所有li元素都是其各自父元素的最后（唯一）子元素。您希望使用.wrap a:last-child li定位列表中的最后a，然后定位其li子项。

Answer 2

你的HTML无效，列表只能有列表元素子节点而锚点不是列表元素对于有效的HTML，您的CSS工作

<div class="wrap">
    <ul>
        <li><a>AAAA</a></li>
        <li><a>BBBB</a></li>
        <li><a>CCCC</a></li>
    </ul>
</div>

如果您使用a包裹li以使其阻止，就像使用css

一样

.wrap ul li a{
    display: block;
}

Answer 3

首先你的HTML无效..

li下不能有a个元素，它们只允许作为ul或ol的直接子元素，并且它们是这两个元素中唯一允许的元素。。（所以a不允许......）

如果您通过将a置于li内而不是相反的方式来修复您的HTML，则可以正常使用。

重要的是，last-child等在共享同一个父元素的元素之间工作