Html 在纯CSS中添加新同级时更改样式

我有一个装有孩子的容器：

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

有时我想在容器中添加另一个子项（服务器端），并更改其他子项的样式，以便为其新兄弟项腾出空间。它将成为：

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

我是否可以纯粹通过CSS实现这一点？是否有我可以使用的新奇选择器（CSS4？）

---

我希望避免使用JavaScript或更改任何元素的属性（类）。我确实读过CSS中缺少父选择器的文章，但我读的文章已经有几年历史了，所以我怀疑可能有一些全新的选择器我可以利用。

我猜你可以尝试一些兄弟选择器和非选择器。。。比如：

.special+div:not(.special){ /*some special style here*/ }
.special+div+div:not(.special){ /*some special style here*/ }
.special+div+div+div:not(.special){ /*some special style here*/ }

@for $i from 1 through X { //REPLACE X WITH A NUMBER
 .special @for $j from 1 through $i {+div}:not(.special):{/*some special style here*/};
}

最多n个分区

.special+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div+div:not(.special){ /*some special style here*/ }

如果您有权访问SCS，您可以执行以下操作：

.special+div:not(.special){ /*some special style here*/ }
.special+div+div:not(.special){ /*some special style here*/ }
.special+div+div+div:not(.special){ /*some special style here*/ }

@for $i from 1 through X { //REPLACE X WITH A NUMBER
 .special @for $j from 1 through $i {+div}:not(.special):{/*some special style here*/};
}

我只是在猜测scss公式，但它应该是这样的：D

此外，根据您想要实现的目标，可能还有其他选择。您能更具体地说明您要应用的样式吗？

否

CSS永远不会支持这一点。即使使用CSS4中的高级选择器，它们也是选择器。它们选择DOM中的某些内容。他们无法生成新的HTML元素

要在jQuery中实现这一点，只需使用

在CSS中设置元素样式的最简单方法是：所有div都是根据第二条规则（无论特殊元素是否存在）设置样式的，第一条规则将应用于一个特殊元素（如果存在），比第一条规则更为特殊。这两个规则都将应用，因此第一个规则中的属性应覆盖第二个规则中的属性

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

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

特殊元素是否也可以在第二、第三等位置创建？

---

然后可以使用类似的技巧（结合

：nth-child（）

/

：nth-last-child（）

），但它有一些限制，比如要设置的元素上限，它不能处理更多的元素，而且选择器会很长，效率相对较低。gzip真的会很好吗：））

开始时是否有已知的儿童数量，或者可以是1到12之间的任何数字？在这种情况下，有一个技巧是使用

：nth-last-child（）

/

：nth-child（）

，否则没有父级或之前的同级选择器（这个想法在W3C CSS工作组讨论过，并被取消；不存在）。我考虑使用

：nth

，但子级的数量未知（@FelipeAls父选择器被取消了？这个问题似乎假设CSS可以知道添加了哪个元素，即使它没有以任何方式被指示为已添加。例如，如果添加的元素具有

class

属性，这个问题就变得微不足道了。但是如果您希望“更改其他孩子的样式，为他们的新兄弟姐妹腾出空间”（可能是由于样式设计中的错误决策），然后您可以使用兄弟姐妹选择器（前提是添加的元素可以用HTML和CSS术语标识）。现在还不清楚真正的问题是什么。“他们无法生成新的HTML元素。”：它将（或不会）按照OP.和（出于某些原因，可能是一个坏的原因）所述在服务器端生成OP使用

#special

，而不是

。special

正如我在OP中所说，我在绘制页面时生成HTML服务器端。我正在寻找一个选择器，我确信它在CSS4中。@FelipeAls我使用

#special

作为示例。提供的代码不是实际的代码。@Codygoldner即使特殊元素不是re，导致页面看起来不正常。不，不会。如果使用

#container div:not（.special）

，它将针对

#container

中没有特殊类的所有

div

（出于某些原因，这可能是一个不好的类）OP使用的是

#special

，而不是

。special

您试图设置选择器最后写入的

div

的样式，对吗？它是如何设置

。special

？在您当前的情况下（这在我看来不起作用），为什么不使用

~

而不是

+

？@Leo我从来没有想过这样做。当然，选择预期数量的兄弟姐妹会需要很多代码，可能无法选择所有兄弟姐妹，但这是一个伟大的尝试。我将尝试一下。据我所知，您希望在添加到如果您只想添加一个具有特定ID的元素，可以跳过：not（.special）最后，在开始时用id选择器替换类选择器，我把它分成了不同的行，因为我认为它可能更容易阅读，但是你可以一直做一些像#special+div，#special+div+div，…，#special+div+div+div..+div{/*样式在这里*/}。如果您使用一个类，它将使您有机会添加更多的div样式，而只添加原始样式。很抱歉响应太晚。您的兄弟选择器工作得非常好。