将last-child应用于元素不起作用

Question

鉴于我有以下标签:

<div id="div-one">
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
</div>

当我尝试使用此css语法将样式应用于最后一个 "div-two"元素时:

#div-one div.div-two:last-child  { border-bottom:solid 1px #999; }

除非我删除隐藏的字段,否则它不起作用.有什么建议吗？

• 这是jsfiddle的链接:http://jsfiddle.net/67qYJ/1/
• 使用Google Chrome v12.0.742.100
• 这是不是在其他地方放置隐藏标签的选项

Answer 1

您的选择器不适用于您当前的标记,因为最后一个孩子是a input,而不是 a div.div-two.

难道div#div-one只是要包含这两种类型的元素？如果是这样,你可以使用:last-of-type,它选择最后一个div(虽然不管它的类):

#div-one div:last-of-type { border-bottom:solid 1px #999; }

但是,如果你的内部div元素还有其他类.div-two,那么选择最后一个.div-two元素将非常困难.你给出的代码很容易,因为div和input是不同的元素类型,只有.div-two类是存在的.