Detailed CSS various selectors and import imported style sheet There are some pseudo-class selectors

(a) CSS selector:

1. Tag Selector: Select the tag directly from the HTML tag name

2. Class Selector: Select the label with the class attribute added by the name {} of the. Selector

3.ID selector: Select the tag with the id attribute added by the # selector name {}, which is the only one in the HTML document

4. Universal selector: Select all the tags in the HTML document via *{}

5. Descendant selector: Selector 1 (space) selector and select all sub-labels in one label

6. Descendant selector: selector 1> selector and select a label in the direct generation of the sub-label, the deeper layer of no effect

7. Intersection selector: Selector 1 (no space in middle) Selector 2 for example #li.li{} Select a Id=li and Class=li label

8. The assembly selector: selector 1, selector 2 for example: #li. li{} Select Id=li or Class=li tags

(ii) The priority of selectors:

1. As a label for the same layer, such as directly acting on the label Li:id selector > class selector > tag Selector > Universal Selector

2. The innermost selector is preferable to the outer layer: div ul li> #ul li tag on the UL innermost, all styles that cover the outer ID selector

3. As used for the same layer, and the last layer selector, then which of the precise priority is high: div ul li>div Li

4. When the priority level is exactly the same, now the following style overrides the previous style

Add: 5. Priority algorithm: style = 1000 (inline style sheet) id = + (id selector) class = 10 (class selector) element = 1 (Tag Selector) Usage: If the function is on the same layer: for example #ul li{} and ul #li {} 2 Which high is the priority, #ul li{} priority is expressed as a numeric value of 101 (100+1), which has a precedence value of 101 (1+100), so the priority is as high as if 2 selectors must be on the same layer

(iii) Three ways to link style sheets import style sheets with import

1. Inline style sheet: written in HTML tags, through the style attribute, the highest priority, but the HTML code and CSS code in a piece, does not conform to the standard CSS "content and style separation", and do not take advantage of late maintenance

2. Internal style sheet: written in the head of the child label style, to some extent, to achieve the separation of content and style, but can not implement style reuse reference way: <link rel= "stylesheet" href= ""/>

3. External style sheet: To achieve the separation of content and style, convenient for later maintenance and reuse, in line with the standard, the lowest priority reference: in the head tag through the <link rel= "stylesheet" href= "CSS resource Address"/>

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

Note: The difference between an internal style sheet and import imports:

1) The link tag is the HTML tag, and import is not

2) Link can be linked to various resources, and import can only be imported into CSS style sheet

3) The link tag is equivalent to the HMTL code and CSS style play a role in the bridge, link CSS code, and import is imported CSS style sheet, will be loaded in the document, import CSS file into HMTL

4) Link mode is when the document side is loaded, side link CSS style, and import is finished in HTML document, after importing CSS style

Last: Select link tab links OK

(d) Pseudo-class selector:

Selector Name: Pseudo-class {}, a state of the pseudo-class label label, such as: a:link{}: The label A label is the orientation of the style; a:hover{}: The style that is displayed when the mouse is placed on the a tag; a:active{}: The style that appears when the mouse is pressed on a tab; a:visited{ }: The style that is displayed when the a tag is accessed, or: a:first-chird{} indicates that the a tag has a parent container, and that the first child tag A is selected under the parent container.