css writing principles_html/css_WEB-ITnose

1.css selector

The way the css selector is written determines the number of matches the browser must perform, and certain types of css selectors will cause the browser to try more matches , so the overhead is higher than simple selectors.

ID selector

This type of selector is simple and efficient and is used to match unique elements on the page. #id {}

Class selector.className {}

Type selector tagName {}

Adjacent sibling selector H1 #toc {}

Child selector #toc > li {}

Descendant selector #toc A {}

Wildcard selector* {}

Attribute selector [href= "#index"] {}

Pseudo classes and pseudo elements A:hover {}

The key to efficient css selectors

1) Rightmost priority

In fact, CSS selectors are matched from right to left.

2) Write efficient css selectors

Avoid using wildcard rules: only use ID and class selectors

Do not limit ID selectors: do not use the left side of the ID selector Add any other selectors

Do not qualify the class selector: Do not qualify the class selector with a specific label, but expand the class name according to the actual situation.

Make the rules as specific as possible

Avoid using descendant selectors

Avoid using tags as child selectors

Rely on inheritance

Double check the purpose of the sub-selectors