This code, hovering on the P, P can rotate and change the color, but why change the class to id (with the class selector instead id selector) not later? Please masters teach you,

CodePudding user response:

You first take a look at the CSS selector priority
https://zhuanlan.zhihu.com/p/85788761

Your code is
. Red {} and the green {} is priority 0.0.1.0
P: hover {} is priority 0.0.1.1

0.0.1.1 priority than 0.0.1.0
So p: hover style can be overridden in {}. The red {} and the green {} in the same style

When changing the class selector to id selector
The id selector
# id {} is priority 0.1.0.0
0.0.1.1 priority below 0.1.0.0
P: hover style cannot cover # id in {} {} is one of the same style of