#书摘 #css #前端
《CSS 选择器世界》2.4.2 CSS选择器优先级的计算规则
对于CSS选择器优先级的计算,业界流传甚广的是数值计算法。具体如下:每一段CSS语句的选择器都可以对应一个具体的优先级数值,数值越大优先级越高,其中的CSS语句将被优先渲染。

其中,出现一个0级选择器,优先级数值+0;
出现一个1级选择器,优先级数值+1;
出现一个2级选择器,优先级数值+10;
出现一个3级选择器,优先级数值+100。

当CSS选择器的优先级数值相等的时候,后渲染的选择器的优先级更高。(后来居上)

后渲染的选择器优先级更高的规则是对整个页面文档而言的,而不仅仅是在一个单独的CSS文件中适用

2.对数值计算法的点评
上面提到的CSS选择器优先级数值计算法实际上是一个不严谨的方法,例如由于1和10之间的差距过小导致连续10个标签选择器的优先级和1个类选择器的优先级相当。然而事实并非如此,不同选择器优先级等级的差距是无法跨越的。但由于在实际开发中不会连续出现多达10个选择器,因此不会影响我们在实际开发过程中计算选择器优先级数值。
而且对于使用CSS选择器,书写习惯远比知识重要,就算理论知识再扎实,如果平时书写习惯糟糕,也无法避免CSS样式覆盖问题、样式冲突等问题的出现。我们将在第3章中深入探讨这个问题。

因此,对于数值计算法,我的态度是学一遍即可,没有必要深究,只要你书写习惯足够好,就不会遇到各种优先级问题。(正确的,合理的)
 
 
Back to Top