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>

我有班级信息的边框底部：

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

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

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

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

Answer 1

我不确定你想要达到的目标是什么？当您只有一个孩子要定位时，您尝试应用: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的{{1}}：

div.info

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

Answer 2

试试这个

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

上课的孩子不上班

2 个答案: