Question

我正努力从我的上一个div中删除边框，这是我的代码：

<div class="media">
    <a class="pull-left" href="producten.php?product=<?php echo $key; ?>">
       <img class="media-object" src="img/<?php echo $key; ?>.png">
    </a>
    <div class="media-body">
        <h4 class="media-heading"><?php echo $output["naam"]; ?></h4>
        <div class="row">
            <div class="col-sm col-xs-10">
              <p><?php echo $output["omschrijving"]; ?></p>
            </div>
            <div class="col-sm-2 col-xs-2">
              <p class="pull-right">Prijs:<b><?php echo $output["prijs"]; ?></b></p>
            </div>
        </div>
    </div>
</div>

和我的CSS：

.media {
    padding-left: 1em;
    padding-right: 1em;
    border-bottom: 1px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.media:last-of-type {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    color: red;
}

但这似乎不起作用，请注意我使用Bootstrap并原谅我有些单词是荷兰语或PHP可能是垃圾（但这就是为什么我＆＃39 ; m学习）。

Answer 1

仅当有问题的元素是容器的最后一个子元素时，

:last-child才有效。 :last-of-type用于特定类型元素的最后一个。

.media:last-child {
  border:none;
}

Answer 2

尝试这样的事情：

div.media:last-child{
}

Answer 3

如何重置边框呢？

.media:last-of-type {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    color: red;
    border:none;
}

Answer 4

您可以尝试以下代码：

.media:last-child{

 border:0;

}

Answer 5

IE7 / IE8不支持最后一个孩子的AFAIK。

也许你可以颠倒边框的顺序，而不是从最后一个删除（border-bottom），然后从第一个删除它（border-top）？你甚至不需要穿上它：

.media + .media {border-top: 1px solid #000000;}

或类似的东西反正它，而不是针对第一个孩子（或者除了上面的第一个孩子之外的所有人）

编辑：更新的代码可能更适合您的示例

从最后一个div删除边框

5 个答案: