What do you know about the meaning and compatibility of all CSS selectors?

As a web front-end developer, accurate understanding of the meaning and compatibility of each CSS selector can be the first step in the advanced!

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

One, Element selector

There are 4 element selectors:

Second, the relationship selector

There are 4 relationship selectors:

Third, attribute selector

There are 7 property selectors:

Note: the "string" here includes a space-delimited word and an entire string. For example: "Val" begins with "string" includes: "Val", "Val abc", "Valabc".

four, Pseudo-class selector

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

Five, pseudo-object selector

A total of 5 pseudo-object selectors:

Note: CSS3 changes the single colon before the pseudo-object selector to double colons, but the previous notation is still valid. E:before and E:after are to be used with the content property, and the value of the content is quoted.

What do you know about the meaning and compatibility of all CSS selectors?