css - 类的最后一个 child 不工作

Question

<div class='container'>
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>$row[info]</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

我有类(class)信息的底部边框:

.info {padding-bottom: 10px;  border-bottom: 1px dashed #C8C8C8;}

但我不想为最后一个 child 添加边框，但它不起作用。所有边框都消失了。

.info:last-child {border-bottom: none;}

这是为什么呢？最好的解决方案是什么？

Answer 1

我不确定您要达到什么目的？当您只有一个 child 作为目标时，您尝试应用 :last-child，因此它不会出现。

如果有多个 .info 就可以了

参见此处:http://jsfiddle.net/ELk4E/ - 在 fiddle 中，我复制了 div.info 三次，第三次也是最后一次通过 :last-child

删除了 border-bottom

但是，如果您的页面上有多次 div.info 但在不同的父项中，这将不起作用。如:

<div class='container'> <!-- parent 1 -->
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>Last Child</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

<div class='container'><!-- parent 2 -->
    <div class='item'>
        <div class='date'>
            <a></a>
        </div>
        <div class='work'>
            <a></a>
        </div>
        <div class='info'>
            <a>Last Child</a>
        </div>
    </div>
   <div id="footer">
  </div>
</div>

在此示例中，您可以使用以下 CSS 删除最后一个容器的 div.info 的 border-bottom:

.info {padding-bottom: 10px;  border-bottom: 1px dashed #C8C8C8;}
.container:last-of-type .info {border-bottom: none;}

基本上 :last-child 选择器匹配作为其父元素的最后一个子元素的每个元素。看这里:http://www.w3schools.com/cssref/sel_last-child.asp