应用CSS最后的孩子，是不是在UL里直接子元素

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 伪不尊重最后宣布class，它只是跟踪元素的最后一个实例在父/子关系。

与:nth-last-child(1)相同。 The 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时采取行动，而不管其DOM级别如何。

Answer 3

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

实施例：http://jsfiddle.net/BDj2h/3/