CSS样式优先级
样式优先级
由高到低为:
- 使用 !improtant 关键字声明的属性会覆盖页面内任何位置定义的元素样式;
- 以字符串形式作为 style 属性的值写在HTML标签内的样式(行内样式);
- id选择器;
- 类选择器 = 伪类选择器 = 属性选择器;
- 标签选择器 = 伪元素选择器 (注:类似于">"、"+"等连结符不加特指度);
- 通配符选择器(*);
- 浏览器自定义的默认样式;
为什么不推荐使用通配符选择器?
因为从优先级的角度上看, 通配符选择器的权重是0,而继承样式是没有权重的,因此不建议使用通配符选择器去设置一些可被继承的样式,容易达不到预期的效果且很难被察觉。
链接标签伪类样式的"爱恨"原则
所谓“爱恨”原则(即LoVe/HAte),是指链接标签的伪类样式按:link->:visited->:hover->:actice的顺序进行编写。这个顺序符合用户操作链接的正常流程,若是随意颠倒伪类样式的顺序,可能会造成样式被覆盖,某个状态下链接标签的样式无法生效。通常link与visited两者顺序不作要求,但hover一定要在link与visited的后面,active一定要在hover的后面,否则样式不生效。
|
:link |
<a>标签未被访问的状态 |
|
:visited |
<a>标签已被访问的状态 |
|
:hover |
鼠标悬停在<a>标签上的状态 |
|
:active |
<a>标签被点击时(未松开)的状态 |

浙公网安备 33010602011771号