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

Question

我最近遇到了这个CSS选择器,同时试图找到一种方法来轻松区分主要的博客元素,如段落和图像.它的使用示例如下:

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

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

特别:

1. 这样的浏览器支持是什么？

2. 在任何情况下你都不希望文章中的元素之间有均匀的边距,如果没有,是否更容易先声明它然后覆盖或简单地单独声明每个元素？

3. 这是否有性能问题因为您选择了所有内容两次？

Answer 1

1. 这样的浏览器支持是什么？

   基本上,IE7 +和任何其他现代浏览器.

   每个浏览器可能存在极端情况,具体取决于实际选择或使用兄弟组合器查询的元素+,但我不会担心这些与边缘被应用于任何兄弟元素的事实一样多.没有实际的理由.

2. 在任何情况下你都不希望文章中的元素之间有均匀的边距,如果没有,是否更容易先声明它然后覆盖或简单地单独声明每个元素？

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

   请记住,在这种特定情况下,垂直边距将会崩溃,因此您只需要为一组元素定义垂直边距,而不必margin-top专门应用于所有元素的后续兄弟.

3. 这是否有性能问题因为您选择了所有内容两次？

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

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

现在说了这些(这里已经很晚了),我可能会根据我上面提到的有关折叠边距的内容重写这样的例子:

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

如果你知道你想要空出的唯一孩子是段落*,p那么它可能只值得替换.

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

或者其中的任何段落.post(例如在blockquotes中):

.post p { margin: 15px 0; }

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