html - 在纯 CSS 中添加新兄弟时更改样式

Question

我有一个带 child 的容器:

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

有时我想在容器中添加另一个子项(服务器端)并更改其他子项的样式以为它们的新 sibling 腾出空间。它将变成:

<div id="container">
    <div id="special"></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我可以纯粹用 CSS 实现吗？是否有我可以使用的新选择器(CSS4？)？

我想避免使用 JavaScript 或更改任何元素的属性(类)。我确实读过有关 CSS 中缺少父选择器的信息，但我阅读的文章是几年前的文章了，所以我怀疑可能会有一些我可以利用的全新选择器。

Answer 1

#container #special {
  float: left;
  background: yellow;
}
#container div {
  /* already float: none; by default */
  background: white;
}

是在 CSS 中以不同方式设置元素样式的最简单方法:所有 div 都根据第二条规则设置样式(无论特殊元素是否存在)，第一条规则将应用于一个特殊元素元素(如果存在)比第一个元素更具体。两条规则都适用，因此第一条规则中的属性应覆盖第二条规则中的属性。

现在，如果您想要在特殊元素存在时以不同方式设置其他 div 的样式:
在您的示例中，没有 div 在特殊的前面，因此您不需要前面的同级选择器；使用通用兄弟选择器就足够了:

#container div {
  padding: 5px;
}
#container #special ~ div {
  padding: 10px;
}

是否也可以在第 2、3 等位置创建特殊元素？
然后一个类似于selecting first half of the elements的技巧可以使用(:nth-child()/:nth-last-child() 的组合，但它有限制，比如要设置元素的上限它不会处理比这更多的元素——而且选择器会很长而且效率相对较低。不过 gzip 真的会很好 :) )