权重的五个等级及其权重

规则总结

行内样式总会覆盖外部样式表的任何样式(除了!important)

单独使用一个选择器的时候，不能跨等级使css规则生效

如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

如果两个相同权重的选择器作用在同一元素上，以后面出现的选择器为最后规则

第二条规则

#test11 {
    color: red;
}
  
.test1 .test2 .test3 .test4 .test5 .test6 .test7 .test8 .test9 .test10 .test11 {
    color: blue;
}
<div class="test1">
  <div class="test2">
    <div class="test3">
      <div class="test4">
        <div class="test5">
          <div class="test6">
            <div class="test7">
              <div class="test8">
                <div class="test9">
                  <div class="test10">
                    <div class="test11" id="test11">
                      css权重
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

最终还是表现为红色。按理说，十一个class选择器权重为110，id选择器权重为100，110 > 100，应该表现为蓝色。因为class选择器和id选择器不是一个等级的，再多的class也会被一个id干掉。

想想那些网络小说里常说的一句话，境界没到，根本就不是一个等级的东西

第三条规则

.test #test{ } // id + class = 100 + 10 = 110
.test #test span{} // id + class + element = 100 + 10 + 1 = 111
.test #test .sonClass{} // id + class + class = 100 + 10 + 10 = 120

第三条样式生效。这个不用多说了，如果不是这样，权重还有毛线用。

第四条规则

<div id="app">
    <div class="test" id="test">
        <span>啦啦啦</span>
  </div>
</div>
<style>
#test span{
  color:blue;
}
#app span{
  color: red;
}
</style>

表现为红色，因为权重相同(权重都是110)，但是红色的样式后出现，所以，表现为红色。

后记

用过一段时间的scss、less写样式，因为大多只用了嵌套，所以多多少少有一些关于权重的问题。

嗯 ~ ~ ~ 感觉BEM或许更适合中大型项目一些？

链接: https://fly63.com/article/detial/9552