Do you know the meaning and compatibility of all CSS selectors_html/css_WEB-ITnose

As a WEB front-end developer, accurately understanding the meaning and compatibility of each CSS selector can be the first step to advance!

CSS selectors can be divided into five categories: element selectors, relationship selectors, attribute selectors, pseudo-class selectors and pseudo-object selectors.

1. Element Selector

There are 4 element selectors:

2. Relationship selector

There are 4 relationship selectors:

3. Attribute Selector

There are 7 attribute selectors in total:

Note: The " character here "String" includes space-separated words and entire strings. For example: "Strings" starting with "val" include: "val", "val abc", "valabc".

4. Pseudo-class selectors

There are 23 pseudo-class selectors (regardless of printing style):

5. Pseudo-object selector

There are 5 pseudo-object selectors:

Note: CSS3 changes the single colon in front of the pseudo-object selector to a double colon, but the previous writing method is still valid. E:before and E:after should be used together with the content attribute, and the value of content should be quoted.