css - 将 css last-child 应用于 ul li 中不是直接子元素的元素

Question

我有这个 HTML --

<ul class="parent">
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
</ul>

还有这个 CSS --

.x{
    border:1px solid black;
    padding: 10px;
}
.child-1:last-child{
    border-color:red;
}

http://jsfiddle.net/BDj2h/1/

我试图仅将红色边框应用于最后一个 child-1 div。但它没有发生。 CSS last-child 伪类检查它是否是其直接父元素中的最后一个元素，而不是整个 DOM 中的最后一个元素(这是我的错误理解)。

知道如何仅使用 css 来做到这一点吗？

Answer 1

li:last-child .child-1

会有同样的效果。

JSFiddle