There are four most commonly used selection methods,
Id rule selection, such as
quoting content
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}
Class rule selection, such as
quoting content
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }
Tag rule selection, such as
quoting content
td { }
div > p { }
input[type= "checkbox"] { }
Uniform selectors, such as
reference content
*
: after
[hidden="true"]
They all start matching from the rightmost until the end of the entire rule on the leftmost.
There is a problem. For example, the rightmost rule can already determine the element you want to select.
More rule matching will cause a waste of performance.
For example, div > p > span#demo{}
div > p > span makes no sense at all.
Improvement:
IDs are unique. There is no need to attach redundant rules. It can also be accurately matched.
Quote content
button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
The following should not appear <a class="toolbarButton"></a>So it can also be optimized.
Quoting the content
button.toolbarButton { } -> .toolbarButton{}
uses too many rules. It is better to directly give the element a class.
For example: div > p > span > a{}
may give a a special performance. Just write a class for a directly.
Special situations require special treatment.
For example, sometimes you need to ensure that the page structure is clean. This method is used to meet the needs of later revisions. It's also possible. Find the best solution in balance.
Use inheritance
#demo .left{text-align:left} ->#demo{text-align:left}
Note: XUL is used in the original article. For students who have not been exposed to XUL, the tags may look a bit strange, but it is not difficult. understand.