Question

我想在最后一个元素的底部添加一个边框，其中包含类onerow和light_grey_bg（下面的div c）。

我有以下html和css，但它没有按照我的预期工作。我尝试的是可以实现的吗？

HTML：

<div class="onerow">a</div>
<div class="onerow light_grey_bg">b</div>
<div class="onerow light_grey_bg">c</div>
<div class="onerow">d</div>

的CSS：

.onerow.light_grey_bg {
  border-top: 1px solid #bdbfc2;
}
.onerow.light_grey_bg:last-of-type {
      border-bottom: 1px solid #bdbfc2;
    }

Answer 1

:last-of-type不会按类别过滤元素，而是按其元素类型（例如div，a，p等）进行过滤，因此您的选择器没有意义，因为它没有包含任何有关该类型的信息。

如果您的HTML保持不变，您可以使用+选择器定位第二个实例：

.onerow.light_grey_bg + .onerow.light_grey_bg {
    border-bottom: 1px solid #bdbfc2;
}

如果此元素有更多实例，您可以根据需要使用尽可能多的+来选择最后一个。

Answer 2

由于Hybrid声明的原因，无法按照CSS建议的方式完成。

虽然....取决于你想要完成的事情......偷偷摸摸总是一个选择

.light_grey_bg {
    border-bottom: 1px solid #bdbfc2;
    margin-top:-1px;
    background: #FFF;
}

http://jsfiddle.net/f82bx/

这取决于你有多少行，他们的订单等...当然，但你明白了。

Answer 3

创建一个包装器（容器）并定义包装器的最后一个子项是您要创建边框的子项

<强> HTML

<div class="wrapper">
<div class="onerow">a</div>
<div class="onerow light_grey_bg">b</div>
<div class="onerow light_grey_bg">c</div>
<div class="onerow">d</div>
</div>

<强> CSS

.wrapper .onerow:nth-child(3) {
  border-bottom: 1px solid #bdbfc2;
}

<强> DEMO

Answer 4

我刚想通了：

.onerow.light_grey_bg {
  border-top: 1px solid #bdbfc2;
  border-bottom: 1px solid #bdbfc2;
}
.onerow.light_grey_bg + .light_grey_bg {
  border-top: none;
}

这适用于div的未知布局。

http://jsfiddle.net/f82bx/2/

选择器中的多个css类

4 个答案: