我们罗列了十几条相关的知识与注意点，大家可以系统的探讨一下，让我们编写的Web页面打开更加流畅。
请不要告诉我，你看不懂E文，只是你不愿意看！！！
1、How the style system breaks up rules
The style system breaks rules up into four primary categories. It is critical to understand these categories, as they are the first line of defense as far as rule matching is concerned. I use the term key selector in the paragraphs that follow. The key selector is defined to be the rightmost occurrence of an id selector, a class selector, or a tag selector.
1.1、ID Rules
The first category consists of those rules that have an ID selector as their key selector.
button#backButton { } /* This is an ID-categorized rule */
#urlBar[type="autocomplete"] { } /* This is an ID-categorized rule */
treeitem > treerow > treecell#myCell :active { } /* This is an ID-categorized rule */
1.2、Class Rules
If a rule has a class specified as its key selector, then it falls into this category.
button.toolbarButton { } /* A class-based rule */
.fancyText { } /* A class-based rule */
menuitem > .menu-left[checked="true"] { } /* A class-based rule */
1.3、Tag Rules
If no class or ID is specified as the key selector, then the next potential category for a rule is the tag category. If a rule has a tag specified as its key selector, then the rule falls into this category.
td { } /* A tag-based rule */
treeitem > treerow { } /* A tag-based rule */
input[type="checkbox"] { } /* A tag-based rule */
1.4、Universal Rules
All other rules fall into this category.
:table { } /* A universal rule */
[hidden="true"] { } /* A universal rule */
* { } /* A universal rule */
tree > [collapsed="true"] { } /* A universal rule */
2、How the Style System Matches Rules
The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.
Your first line of defense is the rule filtering that occurs based on the type of the key selector. The purpose of this categorization is to filter out rules so that you don't even have to waste time trying to match them. This is the key to dramatically increasing performance. The fewer rules that you even have to check for a given element, the faster style resolution will be. As an example, if your element has an ID, then only ID rules that match your element's ID will be checked. Only class rules for a class found on your element will be checked. Only tag rules that match your tag will be checked. Universal rules will always be checked.
3、Guidelines for Efficient CSS
3.1、Avoid Universal Rules!
Make sure a rule doesn't end up in the universal category!
3.2、Don't qualify ID-categorized rules with tag names or classes
If you have a style rule that has an ID selector as its key selector, don't bother also adding the tag name to the rule. IDs are unique, so you're slowing down the matching for no real reason.
复制代码 代码如下: