是一个选择器像* + *安全使用吗？ [英] Is a selector like *+* safe to use?

问题描述

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

  .post * + * {margin-top：15px;} 
 / *或... * / 
 .post> * / 
  

如果您不希望将边距应用于嵌套元素，则* + * {margin-top：15px;}
/

乍一看，它似乎很有用。所以我的问题是：使用这些选择器有什么缺点？

具体来说：

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




2. 有什么情况下，一个文章中元素之间的边距间隔，如果不是，更容易首先声明这一点，然后覆盖或单独声明每个元素？

解决方案

1. 
   

   这类浏览器支持什么？

   
   

   基本上，IE7 +

   
   
   

   每个浏览器可能会有一些角落情况，具体取决于实际使用同级组合器选择或查询的元素 + ，但我不会担心这些事实，边缘被应用于只是关于任何元素是一个兄弟姐妹，没有实际的理由。




2. 
   

   有没有任何情况下，你不想在文章中的元素之间有一个均匀的页边距，如果没有，更容易首先声明，然后重写或简单地声明每个元素？

   
   

   它看起来非常有用的乍一看，但如果你想到它，可能是一个更好的主意，以更具体的应用保证金。这是一个规则，我可以想象将被其他特定选择器覆盖其余的样式表中的许多次，这使得它在很多情况下是多余的，甚至是不希望的。

   
   
   

   请记住，在这种特殊情况下，垂直边距将折叠，因此您只需为一组元素定义垂直边距，而不必




3. $ b $

   b

   这是否因为您选择了两次而出现性能问题？

   
   

   实际上，浏览器只查看每个元素一次，然后确定每个元素是否在同一父元素下的另一个元素之后。它不关心它遵循什么样的元素，只要它遵循另一个。

   
   
   

   现在，人们说： 使用通用选择器 * 结合使用任何组合器导致渲染性能灾难，因此人们说应该避免这种东西成本。但是这个东西根本不重要（老实说，像 * + * 这样的选择器比 p + p ），所以你真的不需要担心它。首先考虑CSS规则本身的效用，然后决定是否真的需要基于该规则的规则。

---

现在有了所有的说法（这里已经很晚了），我可能会重写这样的例子，基于我上面说的折叠边距：

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

可能只需要替换 * p ，如果你知道你想空出的唯一的孩子是段落：

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

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

  .post p {margin：15px 0; } 
  

（ * 选择器是公平的游戏，我承认;另一方面，子组合器限于只有一个嵌套级别，所以对于任何痴迷的性能，这不会伤害所有。）

I recently came across this CSS selector while trying to find a way to easily space out major blog elements such as paragraphs and images. An example of its use would be something like this:

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

At first glance, it seemed pretty useful. So my question is: What downsides are there to using these selectors?

Specifically:

1. What's the browser support like for this?

2. Are there any cases you wouldn't want an even margin spacing between elements in an article and if not, is it easier to declare this first and then overwrite or simply declare each element individually?

3. Does this have performance issues since you're selecting everything twice?

解决方案

1. What's the browser support like for this?

   Basically, IE7+ and any other modern browser.

   There may be corner cases for each browser depending on what elements are actually being selected or queried with the sibling combinator +, but I wouldn't worry about those as much as the fact that the margin is being applied to just about any element that's a sibling for no practical reason.

2. Are there any cases you wouldn't want an even margin spacing between elements in an article and if not, is it easier to declare this first and then overwrite or simply declare each element individually?

   It does seem pretty useful at first glance, but if you think about it, it'll probably be a much better idea to be more specific about what to apply the margin to. This is one rule that I can imagine will be overridden many, many times throughout the rest of the stylesheet by other specific selectors, making it quite redundant and even undesired in many cases. I can't think of any real-world use for a rule like your example.

   Bear in mind that, in this specific case, vertical margins will collapse, so you only need to define vertical margins for a set of elements without having to resort to applying margin-top exclusively to all of an element's following siblings.

3. Does this have performance issues since you're selecting everything twice?

   Actually, it's not selecting everything twice. The browser only looks at each element once, then determines whether each element follows another one under the same parent element. It doesn't care what kind of element it follows, as long as it follows another. It doesn't go around selecting every element again then compare to see if they're siblings of each other.

   Now, people say that using the universal selector * in conjunction with just about any combinator causes rendering performance catastrophes, so people say that this kind of stuff should be avoided at all costs. But this stuff is hardly important at all (honestly, a selector like * + * is only a few microseconds slower than p + p), so you really don't need to worry about it. Consider the utility of the CSS rule itself first, then decide whether you really need the rule based on that.

---

Now with all that said (it's getting pretty late here), I would probably have rewritten the example like this, based on what I said above regarding collapsing margins:

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

It's probably only worth replacing the * with p if you know that the only children you want to space out are paragraphs:

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

Or any paragraphs within .post for that matter (e.g. within blockquotes):

.post p { margin: 15px 0; }

(* being used with the descendant selector is fair game, I'll admit; the child combinator, on the other hand, is limited to only one level of nesting, so for anyone obsessing about performance, this won't hurt at all.)

这篇关于是一个选择器像* + *安全使用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！