css - 如何访问动态嵌套结构中最后一个元素的样式属性？

Question

我正在尝试设置带有边框的自定义动态嵌套“列表”结构的样式，但我无法使用 sass 访问最后一个元素。

我正在使用 angular 来动态创建列表，但最终结构类似于这样，其中可以有任意数量的 parent 和 child :

<div class="parent category">...</div>
<div class="parent category">...</div>
<div class="parent category">
    ...
    <div class="child category">...</div>
    <div class="child category">...</div>
    <div class="child category">...</div>
</div>
<div class="parent category">
    ...
    <div class="child category">...</div>
</div>

我尝试使用 sass 访问父子上的 &:last-child 和 &:last-of-type 但这只会导致子类别获取边框底部。 我的类别类如下所示:

.category {
    padding: 8px 20px;
    background-color: #fff;
    border-top: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
}

编辑:这就是我的列表目前的样子，我只需要让这些标记区域覆盖有边框即可匹配。

有没有办法正确地为最后的每个元素添加一个底部边框，使这个列表看起来很漂亮？如果我遗漏了任何可能有用的信息，请告诉我。

Answer 1

我假设您的边框位于包装元素的顶部和侧面(无论什么都有白色 bg)。一直添加边框，然后添加负边距以将所有内容拉回边框的宽度。

.parent {
  background:#eee;
}
.content {
  background:#fff;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 10px 20px;
  
  /* give everything a border */
  border-top: 1px solid red;
  /*pull top back over previous element up so it doesn't cause double borders */
  margin-top:-1px;
}

.parent > .child {
  margin-left: 50px;
 }

<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
  <div class="child">
    <div class="content">Row content</div>
  </div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>
<div class="parent">
  <div class="content">Row content</div>
</div>