CSS入门学习之选择器权重知识小结

选择器权重

• id:千位
• class:百位
• tag：个位

  例1：

  body h1 {
   color: violet; 
  }

  权重计算过程：
  id:0
  class:0
  tag:1

权重：0,0,1

例2：

body h1.title {
    color: red;
}

权重计算过程：
id:0
class:0
tag:2

权重：0,0,2

因为权重0,0,2>0,0,1 所以h1最终显示的color为red

例3：

.title {
    color: red;
}

权重计算过程：
id：0
class：1
tag：0
权重：0,1,0
比较：0,1,0>0,0,2

例4：

#active {
    color: blue;
}

权重计算过程：
id：1
clas：0
tag：0
权重：1,0,0
比较：1,0,0>0,1,0

知识小结：

• 为什么不推荐为元素添加id:原因就是权重太大，违背了CSS的目标：样式复用
• 为什么推荐使用class：为了让代码有弹性，尽可能用class
• 为什么不直接用最低的标签：因为预置的标签的数量太少了，语义化不强，而class可以随意命名

例外

有没有办法让0,0,1成为最高权重，这时我们就要用到!important

• !important:最高指示，忽略任何权重
• !important:调试样式，只有才调试的时候使用

  例5：

  h1 {
    color: chartreuse !important;
  }