css选择器优先级问题

基本上照抄了《CSS权威指南》的内容,加入一些自己的理解

参考文章

  1. 《CSS权威指南》
  2. 《MDN开发者文档》

    CSS怎么计算优先级

    CSS计算优先级属于CSS三大特性中的层叠的具体体现。浏览器在内部有一套自己的规则去计算CSS选择器的优先级问题,那么让我们从头开始说起。

    什么是层叠

    层叠这个东西说起来其实也挺简单的,把每一个CSS选择器对每一条属性的定义都想像成一层有颜色的薄膜(麻烦忽略一下颜色的相互混合与覆盖加成等等)。对同一个东西定义的所有属性都是这样的一层薄膜。优先级高一点的“薄膜”的颜色会深一些。最后肯定是那些颜色深的薄膜会体现出来,对吧?

那么有一个新问题来了:

如果我的薄膜是一样厚,即优先级是相同的呢?哪一个属性会生效呢?自然是后面定义的那个了。

怎么计算优先级

既然说不同的选择器优先级是不同的,那么咱们肯定要想的一件事情就是?

咋算啊?

有多少种常用的选择器

  1. 标签选择器
  2. ID选择器
  3. 类名选择器(多类)
  4. 多元素组合选择器(子元素,后代,毗邻)
  5. 通用元素选择器
  6. 属性选择器(正则可用,2.1新加)
  7. 伪类选择器
  8. 伪元素选择器

CSS3咱先暂时不提,基本上都是在原有的选择器上面的丰富。

计算方法

假设一个四位的很多进制数,爱是几进制是几进制,反正不进位。 比如: 0000.

我们比较一个多位数的时候,都是从高位开始比较,一旦高位的比较出了结果,下面的直接跳过就完事对吧。

请牢记我们的比较原则。因为css选择器的优先级就是按位对这个四位数进行赋值然后进行比较的。

选择器的具体优先级如下:

· 对于选择器中给定的各个ID属性值,加 0.1.0.0;

· 对于选择器中给定的各个类属性值、属性选择或伪类,加 0.0.1.0;

· 对于选择器中给定的各个元素和伪元素,加 0.0.0.1;

· 结合符和通配符选择对优先级没有任何贡献。

OPPS! 郑重申明,上面提到的计算方法都是没加important声明的情况,我不推荐在css属性中加入重要性声明,很不优雅啊

再次OPPS!你是不是发现,上面提到的规则的计算方法的高位都是0啊,那么我们设计4位数是不是有些浪费呢?

不会的,最高的那位是给行内元素留的,这样是不是就和你已经知道的知识接上了,行内样式的优先级高于外部样式?

#### 举例子?

不存在的,请自己进行实验。

写在最后

因为自己的一些私人问题,沉寂了大概一个月的时间。今天写文章的时候,心里边很乱,很难受。这个月一直都过的很浑浑噩噩。 努力调整吧。不管怎么样生活还是得继续。Coding isn’t my all life, maybe it’s the most important part. enjoy!

Table of Contents