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

Answer 2

:last-child ¹ pseudo不会尊重最后声明的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进行操作1}} element，无论它的DOM级别如何。

Answer 3

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

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

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

3 个答案: