Proficient in CSS version2 note Picker, version2

Proficient in CSS version2 note Picker, version2

1. Common selector:
① The element selector specifies the element to apply the style. For example, p {color: # fff ;}
② The descendant selector looks for the descendant of a specific element or element. for example: body p {color: # ccc;} the difference between this selector and the sub-Selector body> p is: body> p refers to all nodes under the body as sub-elements P, the descendant Selects all node P under the body. It can be said that the child element selector is a special descendant selector.

③ Class selector specifies a specific class application style, such as. a {color: # ccc;} class selector naming based on what it serves rather than what it represents. If many unnecessary classes are added to the document, this may be a signal of unreasonable structure of the document. It is best to select based on the descendant selector of the ancestor selector.
④ The pseudo-class selector applies the style to the element based on other conditions except the document structure, for example, a: hover {color: red} And: link: visited are called link pseudo classes and can only be used for the anchor element, hover: active: focus is called a dynamic pseudo-class. In theory, it can be applied to any element. These pseudo-classes can be stacked to create more complex behaviors.
⑤ The Universal selector matches all available element application styles (equivalent to all selected). It is represented by an asterisk (*). It can be used to apply styles to all descendants of an element, or skip first-level descendants.
6. subselector of the advanced selector: As shown in the previous article.
7. The adjacent compatriot selector selects the first sibling element after an element under the same parent element. It can be thought of as selecting an effect with: after in JS

For example, p + div {color: # 00f;} can implement the application style.

The TRIM attribute selector can search for elements based on the value of the attribute, such as acronym [title = 'practice '] {bgc: blue;}. Find the application style with the title attribute and the value practiced.

Ps: to avoid excessive style disorder, try to keep the general style very general, special style is very special

Inheritance means that the child element of an application style inherits certain attributes of the style. You can set a general style of the parent element to avoid excessive use of the child element label.

Currently, the most common style of a style sheet is a link style. This method is faster than the import method. A single CSS file with a good structure can significantly improve the download speed, but it can be used according to the actual situation, try to make the code beautiful without confusion.

Code structure design (! Important)

To facilitate maintenance, it is best to partition the style

1. General Style

(1) Subject Style

(2) reset Style

(3) Links

(4) Title

Others

2. Secondary Style

(1) Form

(2) notifications and errors

(3) Consistent entries

3. Page Structure

(1) Title, footer, navigation

(2) Layout

(3) other page structure elements

4. Page Components

Pages

5. Overwrite Style

It is a good habit to add comments as needed.