CSS样式优先级

阅读目录

1. 样式优先级
   •  为什么不推荐使用通配符选择器？
2. 链接标签伪类样式的"爱恨"原则

 

---

回到顶部

样式优先级

由高到低为：

1. 使用 !improtant 关键字声明的属性会覆盖页面内任何位置定义的元素样式；
2. 以字符串形式作为 style 属性的值写在HTML标签内的样式（行内样式）；
3. id选择器；
4. 类选择器 = 伪类选择器 = 属性选择器；
5. 标签选择器 = 伪元素选择器 （注：类似于">"、"+"等连结符不加特指度）；
6. 通配符选择器（*）；
7. 浏览器自定义的默认样式；

 为什么不推荐使用通配符选择器？

　　因为从优先级的角度上看， 通配符选择器的权重是0，而继承样式是没有权重的，因此不建议使用通配符选择器去设置一些可被继承的样式，容易达不到预期的效果且很难被察觉。

回到顶部

链接标签伪类样式的"爱恨"原则

　　所谓“爱恨”原则（即LoVe/HAte），是指链接标签的伪类样式按:link->:visited->:hover->:actice的顺序进行编写。这个顺序符合用户操作链接的正常流程，若是随意颠倒伪类样式的顺序，可能会造成样式被覆盖，某个状态下链接标签的样式无法生效。通常link与visited两者顺序不作要求，但hover一定要在link与visited的后面，active一定要在hover的后面，否则样式不生效。

 

:link	<a>标签未被访问的状态
:visited	<a>标签已被访问的状态
:hover	鼠标悬停在<a>标签上的状态
:active	<a>标签被点击时(未松开)的状态