CSS--层叠优先级
2017-03-23 本文已影响0人
栗子酥小小
整体引入时:
1、style
2、style @import
3、link
4、link @import
5、浏览器默认样式
编写文件时:
0、内联在html中,<h1 style="color: green">123</h1>【特殊,比ID优先级高】
1、ID
2、类、属性、伪类(:focus, :last-child等)
3、元素、伪元素(:after, :before等)
4、*
!important超越所有优先级(包括内联形式)在最前
当两个!important相遇时,按照上述规则再次比较
设计者、用户、浏览器:
1、设计者》用户》浏览器
2、带有!important时,用户》设计者》浏览器
a的伪类顺序:LVHA
:link
:visited
:hover
:active
关于a的一个迷思:
之前老是奇怪,为什么在a的父元素上设置字号颜色之类的可继承值时,与a同级的span都能生效,但a就是不生效,现在弄清楚了,按照优先级的设置,继承是在倒数第二,仅高于浏览器默认值。
也就是说,只有当元素上没有专门指定样式时,它才会继承可以继承的属性,不可以继承的属性就用用浏览器默认样式。
所以,对于自己在a元素上设置的字号颜色无法生效的情况,一般来说都是在前面的reset等文件中被专门设置了,而自己在写样式的时候,如果不专门为a指定,则继承的效果的优先级不够,就不会生效。