css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中的重点啊!啪啪啪打脸!

优先级关系

先来看css为元素添加样式的几种规则(优先级a>b>c>d,!important无敌)

CSS(二)-  选择器 - 一定要搞懂的选择器优先级和权重问题

权重计算 

在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的,但普通情况下这个已足够我们判断,很少情况下会如如下例子这么极端:

比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。

还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。

CSS(二)-  选择器 - 一定要搞懂的选择器优先级和权重问题

补充

0.继承得到的样式的优先级最低。

1.虽然提高选择器的权重值能有效解决靠后的渲染失败问题,但也仅仅是个解决方法,渲染不冲突的情况下,不要写那么多累赘

2.!important虽无敌和style虽一人之下,但都应尽量避免使用

相关文章:

  • 2021-06-20
  • 2021-06-17
  • 2021-06-18
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-13
  • 2022-03-06
猜你喜欢
  • 2021-05-27
  • 2022-12-23
  • 2022-12-23
  • 2022-03-07
  • 2022-12-23
  • 2021-05-31
  • 2021-07-17
相关资源
相似解决方案