2

我有这个 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。但它没有发生。CSSlast-child伪类检查它是否是其直接父级中的最后一个元素，而不是整个 DOM（这是我的错误理解）。

知道如何仅使用 css 执行此操作吗？

4

3 回答 3

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

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

于 2013-10-24T14:49:49.153 回答
1

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

1同: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;
}

演示

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

于 2013-10-24T14:48:55.167 回答
1 
li:last-child .child-1

会有同样的效果。

JSFiddle

于 2013-10-24T14:47:33.723 回答