A brief introduction to CSS selectors

Preface: This is the author's understanding and finishing after learning. If there are errors or questions, please correct me, I will continue to update!

Selector weights

If the selector weight is represented by a 4-digit number, then:

• The weight of the element selector is 1;

• The weight of the ID selector is 100;

• The class selector has a weight of 10;

• The inline style (also the lines of the JS operation) has a weight of 1000;

• Of course if a property value is set! Important, it is also the most important, direct killing;

Introduction to CSS selectors :

• Wildcard selector, *{...}, the asterisk represents a wildcard selector and can match any element;

• Element selector, html{...},body{...},p{...}, the element of the document is the most basic selector, element selector;

• The ID selector, #value, sets an id attribute for the element, and the value is values;

• Class selector,. value{...}, set a class property for the element with value

• Property selectors, which select elements based on their attributes and attribute values, are available in many ways:

1. Simple property selector: Img[title], gets the IMG element with the ALT attribute set; #wrapper [Outter], gets the ID wrapper and has the attribute wrapper element;

2. Specific property selector: input[type= "button"], gets the input element of the property value button, #wrapper [outter= "abc"], gets the ID of Wrapper and the value of the attribute Outter is an element of ABC;

• Grouping selectors, separating the selectors to be grouped by commas, #wrapper, #content {...}, gets the element with ID wrapper, and the Elements, two are obtained,

• Descendant selectors, the selectors to be grouped are separated by spaces, #wrapper #content {...}, inside an element object with ID wrapper, gets the element with the ID content, may be a child or descendant element;

• Child element Selector, separating the selector to be grouped by the greater than sign, #wrapper > # content{.}, inside the element object with ID wrapper, get ; child element selectors and descendant selectors are not the same, The descendant selector contains a child element selector, and the descendant selector continues to look down ;

• Sibling element selector:

1. Adjacent sibling selectors (IE6 and below are not supported), the selectors to be grouped are separated by a plus sign,. wrapper +. Content{...}, after getting the element class is wrapper, the next class is the content element, Unlike the General Brotherhood selector, the adjacent sibling selector only receives the element immediately after the current element, and even if there is the same one, it is not selected;

2. The generic sibling selector (IE7 and below), separates the selection to be grouped with a tilde,. wrapper ~. Content{...}, after acquiring the element of class wrapper, all the classes are elements of content, And the neighboring brother selector is not the same;

• Pseudo-class selectors (IE8 and below are not supported):

2. : root selects the root element of the document, which is the HTML element;

4. Input:focus, the current input box gets the focus;

6. Element: hover, hover over the current element;

8. P:nth-of-type (n), the selection is the nth P element of its parent element , which is evaluated by N in the order of the p elements inside the parent element , then obtained; n is an integer, and starting from 1, It can also be a formula, or it can be a keyword even (even), odd (odd);

10. P:first-of-type, the selection is the 1th p element of its parent element, the same as the P:nth-of-type (1) effect;

12. P:last-of-type, select is the last P element of its parent element, note that there is no nth in front;

14. P:nth-last-of-type (n), the selection is the nth P element of its parent element, but is the number from the last subkey , note that there is a nth in front;

16. P:nth-child (n), the selection is the nth child element of its parent element , and it is the P element, which computes N in the order of the child elements inside the parent element , and then the nth is the P element; c4> This occurs when the nth child element may not be p, and then it cannot be obtained , so it is better to use Nth-of-type (n);

18. P:first-child, the selection is the 1th element of its parent element, and is the P element, which is the same as the P:nth-child (1);

20. P:last-child, the selection is the last element of its parent element, and is the P element;

22. P:nth-last-child (n), the selection is the nth child element of its parent element, and it has to be a P element, but from the last subkey , note that there is a nth in front of it;

24. There are a lot of other ...

• Pseudo element selector:

1. : First-letter, specifies the style of the first letter of an element, all The leading punctuation should apply the style with the first letter, and ;

2. : First-line, sets the style of the first line of text in the element, ;

3. : After, IE7 and below are not supported, insert the generated content at the beginning of the element content;

4. : Before,ie7 and below are not supported, insert the generated content at the end of the element content;

5. :: Selection, Match the part selected by the user; , Only two styles of color and background color are supported ;