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

Question

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

我正在使用angular动态创建列表，但最终的结构类似于此，其中可以有任意数量的带孩子的父母：

<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>

Answer 2

我认为您正在寻找类似的东西

.parent-category>.child-category:last-child {
  color:red;
  font-weight: bold
}

我为你制造了一个小提琴 https://jsfiddle.net/prd5yeot/1/