CSS样式优先级

样式优先级

由高到低为:

  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>标签被点击时(未松开)的状态

 

posted @ 2022-06-28 17:31  ˙鲨鱼辣椒ゝ  阅读(67)  评论(0)    收藏  举报