Css 使用选择器的子对象之间的边界

在div中不同元素的子元素之间添加边界的典型方法是什么

在下面的示例中，p，div和div，img之间应该有边界

<div id="list">
    <p>child 1</p>
    <div>child 2</div>
    <img src="">
</div>

儿童1

儿童2

如果所有子项都是

div

，

#list>div~div{border top:1px solid black}

就足够了，但如果元素不同，这似乎不切实际。我尝试了

#list>{border top:1px纯黑}

，但没有成功。然而，

#list>：not（：first child）{border top:1px solid black}

确实有效。虽然这是一个有效的解决方案，但我想知道是否有更好的方法？

这也应该有效

#list * {
 border: 1px solid red;
}

---

这取决于您对最终布局的期望。首先，我假设您希望列表中的元素水平对齐。我在下面的代码中使用了flexbox

可以在元素右侧定义边框，但最后一个除外：

#列表{
显示器：flex；
对齐项目：居中；
}
#列表>*：非（：最后一个子项）{
右边框：深蓝色；
}

儿童1

儿童2

尝试使用：类型的第一个、：类型的最后一个和：仅类型伪选择器这里有一个有用的

您需要一个边框样式来显示边框。@AndyG我简化了边框定义，因为它不太相关，但因为您坚持我已经添加了它。我选择了

\list>：first元素*

，因为这似乎是最简单的一个。不要试图把你的代码“简化”成无效的东西。你这样做并不是在帮助读者。写下你的实际代码。这不仅适用于您的边界声明，也适用于您的选择器（我相信您知道这与您的问题相关）：

#list>̃

和

#list>：not（：first element）

，这两个元素都同样毫无意义，它们不可能起作用。（当然，像我这样的人可能会猜到你真的想让后者成为

#list>：不是（：第一个孩子）

，但我一点也不清楚

#list>̃

应该代表什么。）@BoltClock

：第一个元素

是一个打字错误<代码>：第一个孩子确实是有意的。我对选择器不太熟悉，但是第一个孩子和第一个孩子是等价的，所以我认为

~

和

*~*

是等价的。（他们不是。）我对选择器很好奇，所以我认为边界声明无关紧要，但我明白你的意思。我希望每个元素之间有一个边界，你的解决方案会添加两个边界（每个元素一个）。@FrankVel然后添加

边界底部：0样式。您可以在父元素的中间元素上添加边框顶部和边框底部。如果只有三个孩子，这只会起作用elements@zgood我想要元素之间的边界。在这个解决方案中，第一个孩子仍然会有一个顶部边框，因此不应该选择它。这难道不是一种非常迂回的方式来表示“不，没有比将边框应用于除第一个/最后一个孩子以外的所有孩子更好的方法了”吗？另外，为什么你会假设提问者希望元素水平排列，而他们的示例包括边界顶部声明，而不是边界右侧声明？链接和你的答案一样无用。
#list :not(:last-child) {
  border-bottom: 1px solid red;
}