css - 上课的最后一个 child 不工作

<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>

我的课程信息在边框底部：

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

但是我不希望最后一个孩子有边界，但是它不起作用。所有边界都消失了。

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

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

最佳答案

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

如果有多个.info，它将起作用

参见此处：http://jsfiddle.net/ELk4E/-在小提琴中，我已经复制了div.info 3次，第3个和最后一个通过border-bottom删除了:last-child。

但是，如果您的页面上多次有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删除最后一个容器的border-bottom的div.info：

.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