Question

我最近遇到了这个CSS选择器，同时试图找到一种方法来轻松区分主要的博客元素，如段落和图像。其使用的一个例子是这样的：

.post *+* {margin-top: 15px;}
/* or... */
.post > *+* {margin-top: 15px;}
/* if you don't want the margin to apply to nested elements */

乍一看，它看起来非常有用。所以我的问题是：使用这些选择器有什么缺点？

具体做法是：

浏览器支持的内容是什么？
在任何情况下你都不希望文章中的元素之间有均匀的边距，如果没有，是否更容易先声明这个然后覆盖或简单地单独声明每个元素？
< / LI>
由于您选择了两次所有内容，是否会出现性能问题？

Answer 1

浏览器支持的内容是什么？

基本上，IE7 +和任何其他现代浏览器。

每个浏览器可能存在极端情况，具体取决于实际使用兄弟组合器+选择或查询的元素，但我不会担心这些与应用边距的事实一样多只是为了任何元素这是一个没有实际意义的兄弟。
在任何情况下你都不希望文章中的元素之间有均匀的边距，如果没有，是否更容易先声明它然后覆盖或单独声明每个元素？

乍一看似乎非常有用，但是如果你考虑一下，那么更具体地说明应用保证金的内容可能会更好。这是我可以想象的一条规则，在其他特定选择器的其余样式表中会多次覆盖这些规则，这使得它在许多情况下非常冗余甚至是不受欢迎的。我无法想象像你的例子那样的任何现实世界的使用。

请记住，在这种特定情况下，vertical margins will collapse，所以您只需要为一组元素定义垂直边距，而不必诉诸于margin-top专门用于所有元素的跟随兄弟姐妹。
由于您选择了两次所有内容，这是否存在性能问题？

实际上，它并没有选择所有的东西两次。浏览器只查看每个元素一次，然后确定每个元素是否跟随同一父元素下的另一个元素。它不关心它遵循什么样的元素，只要它跟随另一个元素。它不会再次选择每个元素然后进行比较，看看它们是否是彼此的兄弟姐妹。

现在，人们说使用通用选择器*与几乎所有组合器一起导致渲染性能灾难，所以人们说这种应该不惜一切代价避免吃东西。但这些东西根本不重要（老实说，像* + *这样的选择器只比p + p慢几微秒，所以你真的不需要担心它。首先考虑CSS规则本身的效用，然后根据该规则决定是否真的需要规则。

现在说了这句话（这里已经很晚了），我可能会根据我上面提到的有关折叠边距的内容重写这样的例子：

.post > * { margin: 15px 0; }

如果你知道你想要分开的唯一孩子是段落，那么用*替换p可能是值得的。

.post > p { margin: 15px 0; }

或.post内的任何段落（例如在blockquotes中）：

.post p { margin: 15px 0; }

（*与后代选择器一起使用是公平的游戏，我承认;另一方面，儿童组合器仅限于一个级别的嵌套，所以对于任何关注性能的人来说，这个根本不会受到伤害。）

Answer 2

它被称为“兄弟选择器”。

根据SitePoint，它在所有最近的浏览器和IE8 +中都受支持。 IE7在SitePoint页面上有一些限制，但大部分都可以使用。

它在CSS2 spec中定义。

关于性能：很多CSS都覆盖了其他选择器。这是它的级联性质的一部分。此外，渲染引擎之间的性能差异很大，因此在CSS方面担心性能是不切实际的。

Answer 3

如果HTML注释代替IE7期望看到元素的位置，您还应该考虑与忽略相邻兄弟组合子（以及:first-child伪类）相关的IE7错误。在IE7中加载页面后，有一个workaround将注释删除为DOM节点。

像* + *这样的选择器可以安全使用吗？

3 个答案: