css样式的优先级总结

参考资料:
1、CSS选择器及优先级 总结
2、Web前端面试指导(十三):css样式的优先级是怎么样的?
3、CSS的四种引入方式与特点

  • 不同级别
  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式(行内样式)
  3. id选择器
  4. 类选择器
  5. 元素选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

  • 同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同,优先级不同 
总结排序:内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级,还可以通过计算权重值来比较。(请参见:狠狠戳我

  • 权重规则

(1)一个行内样式记 1000 分;
(2)一个ID 记 100 分;
(3)一个类class或伪类(如:link)记 10 分;
(4)一个标签tag或伪元素(如::first-line) 记 1 分; 

/*权重为1*/
div{
}

/*权重为10*/
.class1{
}

/*权重为100*/
#id1{
}

/*权重为100+1=101*/
#id1 div{
}

/*权重为10+1=11*/
.class1 div{
}

/*权重为10+10+1=21*/
.class1 .class2 div{
} 

注:摘自《CSS实战手册》110页

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值