CSS中class的优先级

在我们为HTML的元素设计样式时，有时会在一个元素中使用到多个class，又或者是这个元素符合多个定义的class，这时候我们就要注意这些class之间的优先级了。

class的定义方式有以下几种：

一、       .a

class的优先级与在元素中的指定顺序无关，和class的定义顺序有关，最后定义的优先级最高。

HTML：

  <div class="a b"> 		
      ab
  </div>
  <div class="b a">
      ba 
  </div>

CSS：

.a{
  color:red;
}

.b{
  color:green;
}

此时页面显示结果为：

可以看到现在都是使用了  .b 的样式，然后把css中 a 和 b 的位置调换

.b{
  color:green;
}

.a{
  color:red;
}

此时页面显示结果为：

 

二.  、       .a.b（没有空格）

这种写法是当 class 中同时出现 a和b时才起作用（class="a b"）

HTML:

  <div class="a"> 
      a
  </div>
  <div class="b">
      b 
  </div>
  <div class="c">
      c
  </div>
  <div class="a b">
      ab 
  </div>
  <div class="a b c">
      abc
  </div>

CSS:

.a.b.c{
  color:orange;
}

.a.b{
  color:brown;
}

.a{
  color:red;
}

.b{
  color:green;
}

.c{
  color:blue;
}

此时页面显示结果为：

这种写法的优先级是按class 的个数来决定的，数量越多，优先级越高。

 

三、          .a .b（有空格）

这种写法是选择 a 的所有 b 子节点

HTML：

<div class="a">
  a
  <div class="b">
    a b
    <div class="b">
      a b b
      <div class="b">
        a b b b
      </div>
      <div class="a">
        a b b a
        <div class="b c">
          a b b a bc
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.a .b{
  color:orange;
}

.a{
  color:red;
}

.b{
  color:green;
}

.c{
  color:blue;
}

页面显示结果为：

a 的所有 b 子节点都显示为绿色。

 

四、          .a>.b

与   .a .b（有空格）类似，不过只对子一代的 b 生效

HTML：同上

CSS：

.a>.b{
  color:orange;
}

.a{
  color:red;
}

.b{
  color:green;
}

.c{
  color:blue;
}

页面的显示结果为：

可以看到只对子一代 a b  和  a b b a bc生效

五、          .a~.b

a~b 是指出现在a后的同一层次的所有的b

HTML:

  <div class="a"> 
      a
  </div>
  <div class="b">
      b 
  </div>
  <div class="a b">
      ab 
  </div>
  <div class="a">
      a
    <div class="b">
      a b
    </div>
  </div>

CSS:

.a~.b{
  color:orange;
}

.a{
  color:red;
}

.b{
  color:green;
}

.c{
  color:blue;
}

页面的显示结果为：

所有出现在 a 后的同一层次的 b 都为橘色

六、          .a+.b

.a+.b  与.a~.b类似，是指刚好出现在a后的同一层次的第一个b

HTML：（同上）

CSS：

.a+.b{
  color:orange;
}

.a{
  color:red;
}

.b{
  color:green;
}

.c{
  color:blue;
}

页面的显示结果为：

出现在 a 后的第二个 ab 没有变成橘色

七、          混合出现

当上述的定义方式同时出现时，先按class的数量排优先级，数量越多，优先级越高。数量相同时，按定义的先后顺序排优先级，最后定义的优先级最高。

HTML：

  <div class="a">
    a
    <div class="a">
      a a
    </div>
    <div class="a b">
      a ab
    </div>
  </div>

CSS：

.a+.b{
  color:yellow;
}

.a~.b{
  color:blue;
}

.a .b{
  color:brown;
}

.a.b{
  color:orange;
} 

.a{
  color:red;
}

.b{
  color:green;
}

页面显示结果为：

a ab 同时满足上面的所有class，最终的颜色为  .a.b 定义的 orange，在变换上面四个class的顺序后，发现总是最后定义的class生效。结果就不一一放出了。

 

八、          !important

class中有 !important 为后缀的样式的优先级无视以上规则。

HTML:（同上）

CSS：（.b{}中加了!important）

.a.b{
  color:orange;
} 

.a+.b{
  color:yellow;
}

.a~.b{
  color:blue;
}

.a .b{
  color:brown;
}

.a{
  color:red;
}

.b{
  color:green !important;
}

 页面的显示结果为：