Do you know the meaning and compatibility of all CSS selectors?

Do you know the meaning and compatibility of all CSS selectors?

As a WEB Front-end developer, You can accurately grasp the significance and compatibility of each CSS selector as the first step in the advanced step!

CSS selectors can be divided into five types: Element selectors, link selectors, attribute selectors, pseudo class selectors, and pseudo object selectors.

I. Element Selector

There are four element selectors:

2. Relationship Selector

There are four relationship selectors:

Iii. Attribute Selector

There are a total of 7 attribute selectors:

Note:Here the "string" contains words separated by spaces and the entire string. For example, the "strings" starting with "val" include "val", "val abc", and "valabc ".

4. Pseudo-class selector

There are 23 pseudo-class selectors (regardless of the Print Style ):

V. pseudo object Selector

There are five pseudo object selectors:

Note:CSS3 modifies a single colon in front of the pseudo object selector to a double colon, but the previous writing is still valid. E: before and E: after must be used with the content attribute, and the content value must be enclosed by quotation marks.

Differences in div css browser compatibility

Does the compatibility you mentioned mean the compatibility of different browsers with css + div?
If yes, there are two solutions: css hack (not recommended, but easy to implement)
A simple and practical hack Method
Color: red; // Firefox knows this and will execute it.
* Color: black; // ie6: Firefox does not know the previous one *. Firefox does not execute this.
* Color: white! Important; // ie7 knows * and later! Important, but the other two browsers will ignore it, So ie7 will execute it.

The other is js (recommended ).

How does CSS attribute selector have compatibility with browsers?

The compatibility issue is complex. Different browsers need to write different codes. Many compatibility issues need to be learned through practice and cannot be clearly explained.