Question

我有一个带孩子的容器：

<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中缺少父选择器，但我读过的文章已经有几年了，所以我怀疑可能会有一些我可以利用的全新选择器。

Answer 1

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

是在CSS中以不同方式设置元素样式的最简单方法：由于第二个规则（是否存在特殊元素），所有div都被设置样式，并且第一个规则将应用于一个特殊的元素如果存在，比第一个更具特异性。这两个规则都将适用，因此第一个规则中的属性应覆盖第二个规则中的属性。

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

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

特殊元素是否也可以在第二，第三等位置创建？
然后可以使用selecting first half of the elements的类似技巧（:nth-child() / :nth-last-child()的组合，但它有一些限制，就像要设置的元素的上限一样，并且它不能用于更多元素比 - 而选择器将是looooong和相对低效。将gzip真的很好虽然:)）

Answer 2

我猜你可以尝试一些兄弟选择器和非选择器...类似的东西：

.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*/ }

最多n个div ...

.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*/ }

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

@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

此外，根据您想要实现的目标，可能还有其他选择。你能更具体地了解你想要应用的风格吗？

Answer 3

没有

CSS不会支持这一点。即使CSS4中有高级选择器，它们也是选择器。他们选择DOM中的东西。它们无法生成新的HTML元素。

要在jQuery中执行此操作，只需使用before()方法

$("div.special").before("#container div:first")

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

3 个答案: