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

【问题标题】：Apply css last-child to an element that is not the immediate child in ul li将 css last-child 应用于不是 ul li 中的直接子元素的元素
【发布时间】：2013-12-10 22:07:19
【问题描述】：

我有这个 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 执行此操作吗？

【问题讨论】：

标签： css pseudo-class css-selectors

【解决方案1】：

li:last-child .child-1

会有同样的效果。

JSFiddle

【讨论】：

【解决方案2】：

:last-child¹ 伪不会尊重最后声明的class，它只会跟踪父/子关系中元素的最后一个实例。

¹ 与:nth-last-child(1) 相同。 :last-child 伪类代表一个作为某个其他元素的最后一个子元素的元素。

例如，如果你有类似的东西

像这样写

div.wrap div.blow:last-child {
   /* .blow doesn't make any sense there, CSS will look up 
       for last div element nested inside .wrap */
}

在这种情况下，您可以尝试使用

.parent li:last-child div[class^="child-1"] {
    border-color:red;
}

或者干脆

.parent li:last-child div.child-1.x {
   border-color:red;
}

Demo

注意：last-child 有点松散的伪，因为如果它不是父元素的最后一个子元素，它会简单地忽略该元素，所以在这里，last-of-type 起作用，它选择 @ 的 last type 987654332@ 不管它是 DOM 级别。

【讨论】：

【解决方案3】：

ul li:last-child > div.child-1 {
    border-color:red;
}

示例：http://jsfiddle.net/BDj2h/3/

【讨论】：