CSS class, ID, label, and pseudo class

CSS can be defined in four ways:
1. class. The name is preceded by a vertex. Note that the class is actually a property. If there is no other content before the vertex, it is global by default. If yes, it is specific to that object.
2. ID, before the name is a "#", which is specifically used for the ID attribute of the object. In essence, if you want to set a style when using the ID, this is no better than writing the class attribute. this attribute cannot be used by other IDS because IDs must be unique. of course, this is basically useless because you don't need to avoid it.
3. labels, in fact, each built-in label, such as P, A, IMG, has a preset style, of course, there are other functions. however, this is essentially the same as custom tags, but it has been defined internally.
4. there are only four pseudo classes: Link, hover, active, and visited. from the perspective of name, it is for hyperlink label a, but it is extended to any other tag. the essence of pseudo-classes is to describe automatic style switching in different States. if you do not need pseudo classes, you can use JavaScript to handle the corresponding events by yourself. pseudo classes provide a simple method.
The following is the key content, that is, how to write CSS labels.
The two ends of the pseudo-class colon cannot have spaces. This indicates that the colon is actually a connector, the same as the dot is an attribute connector, because the CSS space represents different objects, that is, if there is a space between any CSS style names, do not think it is two labels, not one. if there is no space, it is regarded as a label. For example, the CSS statement Div: hover {color: Red} Actually only defines one CSS object, that is, div: hover, or add a hover attribute to the DIV, which is different from the general attribute. It responds to the message that is moved by the mouse and does not need to write hover when used, all divs will automatically respond to the mouse move,
The color turns red.
And Div. the CSS statement hover {color: Red} defines only one CSS object, that is, Div. hover, which is equivalent to adding a common property hover to the Div. How can this property be used? You need to write class = "hover" in the DIV label, which must be used in this way, otherwise it will not work.
What does Div. Hover {color: Red} mean? Because Div and. there is a space between hovers. This is actually two labels, but it describes an inheritance relationship. The hover style we define must be set in the lower-level label of the DIV to take effect, neither the class = "hover" set for the external Div nor the DIV itself works. the same is true for more, Div. hover. ABC indicates the three re-inheritance relationships. If you want this style to take effect, you need to set a label under the DIV to hover, and set the sub-label inside the label to ABC.
Div ,. hover {color: Red} in Div and. there is a comma between hovers. This is actually a parallel relationship, which is short for it and is equivalent to Div {color: Red }. hover {color: Red} Two tags are defined.
CSS style labels can be defined repeatedly. The style defined later will be added or overwritten.

There is also a more weird way: there is no space between Div. Hover. ABC {color: Red}. In this case, we actually define the style of the ABC attribute of the DIV property hover. How can we use it? This is basically useless, and no special rules are introduced, <Div class = "hover ABC"> text </div> is used in this way (the strange thing is that "ABC hover" is written in parallel, but it is actually a parallel relationship ), this conflicts with the use of two styles. Check whether hover and ABC are two classes. in short, if there is a global style with the same name, such as ABC style and hover style, it will also be fully used,
Of course, Div. Hover. ABC has priority. It doesn't matter if you don't understand it. You just need to use it like this.