带有 :last-child 的 css 覆盖所有其他。
.service-teaser .item:first-child {
margin-left: 0px;
margin-right: 50px;
}
.service-teaser .item:last-child {
margin-left: 50px;
margin-right: 0px;
}
我的 html 如下所示:
<div class="container service-teaser>
<div class="row">
<div class="col-md-4">
<a href="#" class="item"></a>
</div>
<div class="col-md-4">
<a href="#" class="item"></a>
</div>
<div class="col-md-4">
<a href="#" class="item"></a>
</div>
</div>
</div>
现在每个类为“item”的元素都将被 :last-child 覆盖。我的问题在哪里? :/
最佳答案
问题是您的 .item
元素被包裹在 div
元素中。它们总是 :first-child
和 :last-child
div
元素。相反,您需要将这些伪类选择器放在 div
元素本身上:
.service-teaser .row div:first-child .item { ... }
.service-teaser .row div:last-child .item { ... }
关于html - CSS :last-child overriding all,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31433296/