0

我有一个带孩子的容器：

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

4

3 回答 3

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 等位置创建特殊元素？然后可以使用与选择前半部分元素
类似的技巧（ /的组合，但它有限制，例如要设置的元素的上限，并且它不适用于比这更多的元素 - 选择器将是looooong 并且相对低效。不过 gzip 真的会非常好:) ):nth-child():nth-last-child()

于 2013-08-09T04:05:34.900 回答
0

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

.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

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

于 2013-08-09T03:32:07.170 回答
0

不。

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

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

$("div.special").before("#container div:first")
于 2013-08-09T03:32:16.340 回答