There are also differences between the various CSS selectors and the introduction of style sheets. import a style sheet to introduce some pseudo-class selectors and import selectors.

There are also differences between the various CSS selectors and the introduction of style sheets. import a style sheet to introduce some pseudo-class selectors and import selectors.

(1) CSS selector:

　　　　　　1. Tag Selector:Select the tag directly using the HTML Tag Name

　　　　　　2. class selector:The. selector name {} is used to select the label with the class attribute added.

　　　　　　3. ID Selector:The # selector name {} is used to select the tag with the ID attribute added. The ID is unique in the HTML document.

　　　　　　4. General Selector:Use * {} to select all tags in the HTML document

　　　　　　5. Descendant Selector: Selector 1 (Space) selector 2 to select all child tags corresponding to a tag

　　　　　　6. Child Selector: Selector 1> selector 2 is used to select the Direct Generation of sub-tags in a tag, which does not work for a deeper layer.

　　　　　　7. Intersection Selector: Selector 1 (no space in the middle) selector 2 For example # li. li {} select a label with ID = li and class = li

　　　　　　8. Union Selector: Selector 1, selector 2 For example: # li. li {} select the ID = li or class = li label

(2) selector priority:

1. Used as a label for the same layer. For example, all labels are directly applied to the label li: ID selector> class selector> label selector> General selector.

2. the inmost selector has a higher priority than the outer one: div ul li> # ul li labels are located at the inmost of ul, and all styles that can overwrite the outer ID Selector

3. As used for the same layer, and the last layer has the same selector, the precise priority is higher: div ul li> div li

4. When the priorities are the same, the subsequent style will overwrite the previous style.

　　　　　　Supplement: 5. algorithm of priority: style = 1000 (intra-row style sheet) id = 100 (id selector) class = 10 (class selector) element = 1 (Label selector) usage: the premise is that the role is at the same layer: for example, which of the # ul li {} and ul # li {} 2 has a higher priority, # ul li {} the priority value is expressed as 101 (100 + 1), and the latter has a priority value of 101 (1 + 100), so the priority is as high, the premise is that two selectors must act on the same layer.

(3) link a style sheet to import a style sheet in three ways

　　　　1. In-row style sheets: It is written in the HTML Tag. The style attribute has the highest priority, but the HTML code and CSS code are combined, which does not conform to the CSS standard "separated content and style ", and do not use later maintenance

　　　　2. Internal Style Sheets: In the sublabel style written in the head, content and style are separated to some extent, but style reuse references cannot be implemented: <link rel = "stylesheet" href = ""/>

　　　　3. External Style Sheets:The separation of content and style is realized to facilitate later maintenance and reuse. It complies with W3C standards and has the lowest priority reference: use <link rel = "stylesheet" href = "CSS resource address"/>

　　　　4. import a style sheet: In the internal style sheet style, use @ import url (CSS resource address) to import the CSS style sheet

Note: differences between the internal style sheet and import:

1) The link tag is an html tag, but the import tag is not

2) link can link various resources, while import can only import CSS style sheets.

3) The link tag serves as a bridge between the hmtl code and css style, linking css code, and the import is to import the css style sheet. when the document is loaded, the CSS file is imported to the HMTL.

4) The link method is to link CSS styles while loading the document. After the import is completed in the html document, the css styles are imported.

Conclusion: Select link label link.

(4) pseudo-class selector:

Selector name: pseudo class {}, a state of the pseudo class label, such as: a: link {}: Label a is a style of the orientation; a: hover {}: the style displayed when the mouse is placed on the tag; a: active {}: the style displayed when the mouse is pressed on the tag; a: visited {}: the style displayed when the tag is accessed. Alternatively, a: first-chird {} indicates that the tag has a parent container, and the first sub-tag a under the parent container is selected.