我最近在尝试找到一种轻松分隔主要博客元素(例如段落和图像)的方法时遇到了这个 CSS 选择器。它的使用示例如下:
.post *+* {margin-top: 15px;}
/* or... */
.post > *+* {margin-top: 15px;}
/* if you don't want the margin to apply to nested elements */
乍一看,它似乎很有用。所以我的问题是:使用这些选择器有哪些缺点?
具体来说:
浏览器对此的支持如何?
是否存在您不希望文章中元素之间的边距均匀的情况,如果不是,首先声明它然后覆盖或简单地单独声明每个元素是否更容易?
由于您选择了所有内容两次,这是否存在性能问题?
-
浏览器对此的支持如何?
基本上,IE7+ 和任何其他现代浏览器。
每个浏览器可能存在极端情况,具体取决于实际选择或使用同级组合器查询哪些元素+
,但我不会担心这些,因为事实上保证金正被应用于任何元素这是没有实际原因的兄弟姐妹。
-
是否存在您不希望文章中元素之间的边距均匀的情况,如果不是,首先声明它然后覆盖或简单地单独声明每个元素是否更容易?
乍一看,它确实非常有用,但如果您仔细考虑一下,更具体地说明边距的应用范围可能会更好。我可以想象,这条规则将在样式表的其余部分被其他特定选择器多次覆盖,从而使其变得非常多余,甚至在许多情况下是不需要的。我想不出像你的例子这样的规则在现实世界中的任何用途。
请记住,在这种特定情况下,垂直边距会塌陷,因此您只需要为一组元素定义垂直边距,而不必求助于应用margin-top
独占于某个元素的所有后续同级元素。
-
由于您选择了所有内容两次,这是否存在性能问题?
实际上,它并不是将所有内容都选择两次。浏览器只查看每个元素一次,然后确定每个元素是否跟随同一父元素下的另一个元素。它不关心它遵循哪种元素,只要它遵循另一个元素即可。它不会再次选择每个元素,然后比较它们是否是彼此的兄弟姐妹。
Now, 人们说使用通用选择器*
与任何组合器结合都会导致渲染性能灾难,所以人们说应该不惜一切代价避免这种事情。但这些东西根本不重要(老实说,像这样的选择器* + *
仅比以下几微秒慢p + p
),所以你真的不需要担心。首先考虑CSS规则本身的实用性,然后据此决定是否真的需要该规则。
现在说了这么多(现在已经很晚了),根据我上面所说的关于折叠边距的内容,我可能会重写这样的示例:
.post > * { margin: 15px 0; }
可能只值得更换*
with p
如果您知道您唯一想要间隔的子级是段落:
.post > p { margin: 15px 0; }
或其中的任何段落.post
就此而言(例如在块引号内):
.post p { margin: 15px 0; }
(*
我承认,与后代选择器一起使用是公平的游戏;另一方面,子组合器仅限于一层嵌套,因此对于任何痴迷于性能的人来说,这根本不会有什么坏处。)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)