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

我正在尝试用边框设置自定义动态嵌套“列表”结构的样式，但是我无法使用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>

编辑：这是我的列表当前的样子，我只需要用边框覆盖这些标记区域，以匹配

---

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

我想您正在寻找类似的信息

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

我为你做了一把小提琴

---

我假设您的边框位于包装器元素的顶部和侧面（任何带有白色背景的元素）。一直添加边框，然后添加负边距，将所有内容拉回到边框宽度

.parent{
背景：#eee；
}
.内容{
背景：#fff；
左边框：1px实心#333；
右边框：1px实心#333；
边框底部：1px实心#333；
填充：10px 20px；
/*给每件事一个界限*/
边框顶部：1px纯红；
/*将上一个元素的顶部向后拉，这样就不会产生双边框*/
页边顶部：-1px；
}
.parent>.child{
左边距：50像素；
}

行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容
行内容

是否可以使用实际列表创建此列表<代码>ul或

ol

？如果是这样的话，您可以更轻松地设置类似于以下内容的样式：

li>ul

（儿童列表中的列表）@BryceHowitson最初我尝试过使用ul，但问题是我使用的拖放库需要在父元素中创建“拖放区域”。因此，当我将嵌套列表结构放在另一个最顶端的div容器中时，列表之间的间距很大。但是现在说到它，我能不能去掉css中出现的奇怪的间距？我只需要在那些标记的位置上显示底部边框@brycehowitsonth就可以了！你能把它加到问题上吗？我想你会得到更好的答案。@brychowitsonyeah这绝对适用于最后一个元素（在所附的照片中是3天2夜的钓鱼），但是带有子元素的父元素没有底边。谢谢你！轰，成功了！非常感谢你的帮助布莱斯。我不知道你可以做负利润，很酷。是的，负利润真的很有用。但我要提醒你一句。向页面顶部拉东西比向另一个方向拉东西容易得多。尤其是在这种情况下，因为下一个元素“位于上一个元素的顶部”。

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