A brief introduction to CSS selectors

Foreword: This is the author’s own understanding and organization after studying. If there are any errors or questions, please correct them and I will continue update!

Selector weight

If the selector weight is represented by 4 digits, then:

• The weight of the element selector is 1; the weight of

• id selector is 100;

• classThe weight of class selector is 10; the weight of

• inline style (JS also operates inline style) is 1000;

• Of course if a attribute value is set! important, it is still the most important, kill it directly;

CSS selectorIntroduction：

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

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

• id selector, #value, set an id attribute to the element, the value is value;

• class class selector, .value {...}, set a class attribute to the element, the value is value;

• Attribute selector, the attribute selector is based on the attribute and attribute value of the element. There are many ways to select elements:

1. Simple attribute selector: img[title], get the img element with the alt attribute set; #wrapper[outter], Get the element whose id is wrapper and has the attribute wrapper;

2. Specific attribute selector: input[type="button"], get the input element of attribute value button; #wrapper[outter= "abc"], get the element whose id is wrapper and the value of attribute outer is abc;

3. Partial attribute selector: p[class ^="a"], get The p element whose class attribute value starts with a; p[class $="b"], gets the p element whose class attribute value ends with b;

• GroupSelector, separate the selectors to be grouped with commas; #wrapper, #content{...}, get the element with the id of wrapper and the element with the id of content, two Get all;

• Descendant selector, separate the selectors to be grouped with spaces, #wrapper #content{...}, in the element with the id of wrapper Inside the object , get the element with the id of content, may be a child element or a descendant element;

• child element Selector , separate the selectors to be grouped with a greater than sign, #wrapper > #content{...}, inside the element object with the id of wrapper, Get the ## with the id of content #Child element, only search one level down; The child element selector is different from the descendant selector. The descendant selector contains the child element selector, and the descendant selector will continue to search downwards；

• Sibling element selector:

1. ##Adjacent sibling selector

   (IE6 and the following are not supported), separate the selectors to be grouped with a plus sign, .wrapper + .content{...}, after obtaining the element with class wrapper, the next element with class content, and The difference between the universal sibling selector is that the adjacent sibling selector only obtains the element immediately following the current element . Even if there is the same element later, it cannot be selected;

Universal sibling selector (not supported by IE7 and below), separate the selectors to be grouped with tildes, .wrapper ~ .content{...}, get class After the element that is wrapper,
2. all

   elements with class content are different from the adjacent sibling selectors;

• Pseudo class Selector (not supported by IE8 and below):

1. # #:root selects the root element of the document, that is, the html element;

2. input

   :focus, the current input box gets focus;

3. element

   :hover, the mouse is hovering over the current element;

4. p:nth-of-type(n), The selection is the nth

   p element of its parent element. This is calculated n in the order of the p elements inside the parent element. Then get; n is an integer, and starts from 1, it can also be a formula, or it can be the keywords even (even number), odd (odd number);

5. p

   :first-of-type, selects the first p element of its parent element, which has the same effect as p:nth-of-type(1);

6. p

   :last-of-type, the selection is the last p element of its parent element, note that there is no nth in front;

7. p:nth-last -of-type(n), the selection is the nth p element of its parent element, but

   is counting from the last child forward , note that there is nth in front;

8. p:nth-child(n), the selection is the nth

   child element of its parent element, and it must be a p element, this is according to the parent element Calculate the order of the sub-elements inside the element n, and then check whether the n-th sub-element is a p element; There is a situation where the n-th sub-element may not be p, and then cannot be obtained, so it would be better to use nth-of-type(n);

9. p

   :first-child, the selection is its parent element The 1st element of and is a p element, the same as p:nth-child(1);

10. p:last-child, selects the last element of its parent element, And it is a p element;

11. p:nth-last-child(n), the selection is the nth child element of its parent element, and it must be a p element, but

    is Count from the last sub-item forward, note that there is nth in front;

12. There are many others...

• Pseudo element selector:

1. :first-letter, specifies the style of the first letter of an element, all Leading punctuation should be applied with this style along with the first letter, and can only be associated with block-level elements ;

2. ## :first-line

   , sets the style of the first line of text in the element, can only be associated with block-level elements;

3. :after

   , IE7 and below does not support it, insert the generated content at the beginning of the element content;

4. :before

   , IE7 and below does not support it, insert it at the beginning of the element content Finally, insert the generated content;

::selection, matching the part selected by the user;
5. only supports double colon writing

   , only supports both color and background color Style；

The above is the detailed content of A brief introduction to CSS selectors. For more information, please follow other related articles on the PHP Chinese website!