css – 应用last-child到元素不工作

鉴于我有以下标签：

<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
>将隐藏的标签放在别处不是一个选择

解决方法

您的选择器不适用于您当前的标记,因为最后一个小孩是输入,而不是div.div-2.

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类存在.