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

我的课程信息有border-bottom：

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

但我不想要最后一个孩子的边框，但它不起作用。所有的边界都消失了。

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

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

4

2 回答 2

3

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

如果有不止一个，它会起作用.info

见这里： http: //jsfiddle.net/ELk4E/ - 在小提琴中我复制了 div.info 三次，第三次也是最后一次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

于 2013-08-06T07:29:19.733 回答
-1

试试这个

.info:last-child {border-bottom: none; !important}
于 2013-08-06T07:32:47.357 回答