html - 编写高效的 CSS

Question

好的，所以在另一个问题中讨论了一些事情，并提到了这个链接:

https://developer.mozilla.org/en/Writing_Efficient_CSS

在那篇文章中，他们说了一些我不知道的事情，但在我问他们之前，我应该问这个……这是否适用于 Firefox 解释的 CSS？请原谅我的笨拙，但我不确定他们所说的 Mozilla UI 是什么意思。 (别伤害我!)

如果确实适用，当他们说:

Avoid the descendant selector!

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive, especially if a rule using the selector is in the tag or universal category. Frequently what is really desired is the child selector. The use of the descendant selector is banned in UI CSS without the explicit approval of your skin's module owner.

* BAD - treehead treerow treecell { }
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { }

后代选择器只是一个空格？那么 child 和 descendant 之间有什么区别呢？ child 是另一个元素中的一个元素，但这与后代不一样吗？在我写作的时候，我想我可能已经明白了。后代可能是 child /孙子/曾孙/等等？而child只有一个深？

再次为我的问题的愚蠢水平道歉...只是想知道，因为我一直在我的网站的 CSS 中使用后代。但是，是的，如果这与 Firefox 无关，那么整个问题就毫无意义......

如果它与 Firefox 无关，有没有人有指向解释 Firefox 或一般浏览器效率的文章的链接？

Answer 1

A descendant could be a child/grandchild/great-grandchild/etc? And child is only one deep?

是的，没错。由于一个 child 只能是一个深度，因此渲染引擎必须递归搜索以检查规则是否匹配的空间要小得多。

是的，那篇文章是关于 Firefox 和一般浏览器的。其中的大部分(全部？)内容适用于任何页面呈现引擎。