一,前言:

  刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规定的?

 

二、正文:

  先上一个例子

复制代码
<div id = "outerId" class = "outerClass">
    <div id = "innererId" class = "innerClass">
          <p id = "thisId" class = "thisClass" style = "">这是一个CSS选择器的测试</p>
      <button type = "button" class = "buttonClass">按钮</button>
    </div>
</div>
复制代码

问:有多少种css选择器可以对<p>标签样式产生影响呢?

如果详细的进行分析,排列组合有太多种了,太过麻烦。我们就说说有哪几个类别:

  • 行内样式:        即  style = "font-size: 12px";
  • id选择器:      即  #thisId {font-size: 12px;}
  • class选择器:   即 .thisClass {font-size: 12px;}
  • 元素选择器:    即  p {font-size: 12px;}

如上四种类别都可以对<p>标签的样式产生影响,那么谁先谁后,谁打谁小呢?

 

有如下两种解释:

  1. 一个selector的权重表示方式:0.0.0.0,按照计算规则给每位填充数字,对应位置相等,则比较下一位;
  2. 也有分别以1000、100、10、1四个权值系数对CSS选择器进行权重计算。
选择器类别 说明 权重表示 权值表示
行内样式 行内只有一个 style = "" (1.0.0.0)  1000
id选择器 selector中使用了几个id,即#的个数 (0.1.0.0)  100
类选择器 类,伪类,以及属性的个数

如: .outerClass .buttonClass[type="button"]:hover{}

选择器中有2个类,1个属性,1个伪类

(0.0.1.0)  10
元素选择器 伪元素和标签元素的个数,如: p:first-child

选择器中有一个标签元素p和一个伪元素first-child

(0.0.0.1)  1

 

 

 

 

 

 

 

 

 

最后的几点说明:
  • !important 表示强制应用该样式,例如:buttonwidth: 150px !important;},与以上的选择器相遇时,强制使用此样式;
  • 如果比较后权重相同,那么后者覆盖前者,后渲染的胜出;
  • 内联样式  > id选择器样式 > 类选择器样式 > 元素选择器样式;
  • CSS选择器的使用,应该尽量避免使用 !important 和 内联样式;id通常也是与class区分开使用,前者多用于JS中的结点定位,后者多用于CSS选择器。
  • 重中之重,1000/100/10/1这种权值系数的比较方式只是便于理解,真实情况下10个class并不能逆转1个id。