在 Mozilla UI 中誊写高服从 CSS

原文：Writing Efficient CSS for use in the Mozilla UI
译文：在 Mozilla UI 中誊写高服从 CSS

以下文档描写了应用在 Mozilla UI 中优化 CSS 文件的法则。第一部门是对付 Mozilla 样式体系分类法则的一样平常性接头。在相识这个体系的基本上，后续部门包括了一些指南，誊写可以操作这个样式体系实践利益的样式的指南。

样式体系怎样分类法则

样式体系把法则分为四大类。领略这些类是很重要的，由于对付法则的匹配来说他们是起主要思量的。之后的段落中会行使“主选择符”这个说法。主选择符是指选择符最右边的部门(最终要匹配的谁人元素，而不是它的祖先元素)。譬喻，在以下法则中：

a img, div > p, h1 + [title] {}

主选择符是 “img”, “p”, 和 “[title]“。

ID 法则

ID 选择符作为主选择符的法则。

譬喻：

• button#backButton { } /* ID 类此外法则 */
• #urlBar[type="autocomplete"] { } /* ID 类此外法则 */
• treeitem > treerow > treecell#myCell:active { } /* ID 类此外法则 */

Class 法则

假如一条法则有一个指定的 class 作为主选择符，就被归入此类。

譬喻：

• button.toolbarButton { } /* 基于 class 的法则 */
• .fancyText { } /* 基于 class 的法则 */
• menuitem > .menu-left[checked="true"] { } /* 基于 class 的法则 */

Tag 法则

假如主选择符不是 ID 可能 class，那么下一个类很也许就是 tag 分类。假如一条法则指定 tag 为主选择符，就被归入此类。

譬喻：

• td { } /* 基于 tag 的法则 */
• treeitem > treerow { } /* 基于 tag 的法则 */
• input[type="checkbox"] { } /* 基于 tag 的法则 */

全局法则

除以上分类之外都归入此类。

譬喻：

• [hidden="true"] { } /* 全局法则 */
• *{} /* 全局法则 */
• tree > [collapsed="true"] { } /* 全局法则 */

样式体系怎样匹配法则

样式体系从最右边的选择符开始向左侧移动来匹配一条法则。样式体系会一向向左匹配选择符直到法则匹配完毕可能因为堕落遏制匹配。

对付法则分类的第一步产生在主选择符种别基本上。这个分类的目标是把那些不必要挥霍时刻匹配的法则过滤出来。这是明显晋升机能的重点。对付一个给定的必要匹配的元素，法则越少，样式的渲染越快。譬喻，元素有一个 ID，那么只有和元素 ID 匹配的 ID 法则会被检索。只有和元素的 class 匹配的 class 法则会被检索。只有和 tag 匹配的 tag 法则会被检索。全局法则老是会被检索。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!