Detailed explanation of various CSS selectors, import style sheets and some pseudo-class selectors

(1) CSS selector:

1. Tag selector: directly select the tag through the HTML tag name

2. Class selector: through the name of the selector { } To select tags with added class attribute

　　3.ID selector: Use #selector name{} to select tags with added ID attribute. ID is unique in the HTML document

4. Universal selector: Use *{} to select all tags in the HTML document

5. Descendant selector: Selector 1 (space) Selector 2 to select a tag All corresponding sub-tags

　　6. Child selector: Selector 1>Selector 2 To select the immediate generation of sub-tags in a tag, it does not work for deeper ones

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

8. Union selector: Selector 1. Selector 2 For example: #li.li{} selects the tag

with ID=li or class=li (2) Priority of the selector:

　　1. Treated as applied to the same The labels of the layer, for example, all directly act on the label li: ID selector>Class selector>Tag selector>Universal selector

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 over over to the outer layer: div ul li>#ul li tag is at the innermost side of ul, all styles that can cover the outer ID selector

3. If it is used on the same layer, and the last layer selector is the same, then whichever one is more accurate will take precedence The higher the level: div ul li>div li

　　　4. When the priorities are exactly the same, the later styles will now overwrite the previous styles

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  4. When the priorities are exactly the same, the later styles will now overwrite the previous styles

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 around 5. Priority algorithm: style = 1000 (inline style sheet) id = 100 (id selector) class = 10 (class selector) element = 1 (label selector) Usage: The premise is that it acts on the same layer: such as #ul li{} and ul # Which of the two has a higher priority? #ul li{}The priority is expressed as 101 (100+1), and the priority of the latter is 101 (1+100), so the priority is the same. The premise is that the two selectors must act on the same layer

(3) Three ways to link the style sheet to import the style sheet

　1. Inline style sheet: written in the HTML tag, through The style attribute has the highest priority, but it combines HTML code and CSS code, which does not comply with the CSS standard of "separation of content and style" and does not utilize later maintenance

　 2. Internal style Table: written in the sub-tag style of the head, the content and style are separated to a certain extent, but the style reuse reference method cannot be realized:

　3. External style sheet: realizes the separation of content and style, facilitates later maintenance and reuse, complies with W3C standards, and has the lowest priority. Reference: pass

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

　　Note: Internal The difference between style sheet and import import:

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

##　　　 　　　　　　　　　　　　　　　　　nel down through the link tag >>

## 3) The link tag acts as a bridge between hmtl code and css style, linking the css code, while import imports the css style sheet, which will import the CSS file into HMTL when the document is loaded.

　　4) The link method is to link the CSS style while the document is loading, while the import is to import the CSS style after the HTML document is completed.

## (4) Pseudo-class selector:

Selector name: Pseudo-class {}, a state of the pseudo-class label, for example: a:link{}: The label a label is the orientation. style; a:hover{}: the style displayed when the mouse is placed on the a label; a:active{}: the style displayed when the mouse is pressed on the a label; a:visited{}: when the a label is visited The displayed style; it can also be: a:first-chird{} means that the a tag has a parent container, and the first child tag a under the parent container is selected

More details on various CSS selectors and imports Please pay attention to the PHP Chinese website for articles related to importing style sheets and some pseudo-class selectors!