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".
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.