如何在CSS中设置父级和子级之间的边框？

Question

为了在元素之间设置边界线，我在每个子元素的一侧使用边框，除了最后一个。对于示例

<div class="parent">
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Fourth</div>
</div>

使用CSS

.parent div{
    display:block;
    padding:5px;
    border-bottom:dashed 1px #000}
.parent div:last-child{
    border-bottom:dashed 0 #000
}

有没有办法根据父级的 CSS 样式设置子级之间的边框？不使用

last-child

。换句话说，在父规则的一个声明中。

Answer 1

不可以，边框是子元素的属性，因此只能在子元素上指定。您可以为此使用单个规则，但它需要高级 CSS3 选择器支持：

.parent > div:not(:last-child){
    border-bottom: dashed 1px #000;
}

Answer 2

我只知道一个解决方法：使用 jQuery 并迭代这些子元素（每个：http://api.jquery.com/each/）并设置你的 css 类 if next(next: http://api. jquery.com/?s=next) 元素也是子元素...

我认为另一种方式，仅使用css不存在，但我不确定，如果您找到仅使用css的解决方案，请发布;)

问候

Answer 3

您可以玩

box-shadow

属性：

.parent > div + div {
     box-shadow: inset 0px 1px 0px 0px black;
 }

<div class="parent">
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Fourth</div>
</div>

了解类似表格的视图也很有帮助：

.parent div {
    box-shadow: 1px 1px 0px 0px black,
                inset 1px 1px 0px 0px black;
}

<div class="parent">
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Fourth</div>
</div>