今天遇到一个有趣的问题,class 选择器权重是 10,id 选择器权重是 100,那么 11 个 class 选择器可以干掉 1 个 id 选择器吗?😂

先来一段简单的 html 测试下:

<div id="k" class="a b c d e f g h i j k">xxxxx</div>
<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k" id="m">xxxx</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .a.b.c.d.e.f.g.h.i.j.k {
    background: black;
  }

  .a .b .c .d .e .f .g .h .i .j .k {
    background: red;
  }

  #k {
    background: green;
  }

  #m {
    background: yellow;
  }
</style>

发现并不能,难道选择器的权重不是 10 和 100?

查了 MDN,同时通过 Google 搜索发现,张鑫旭大佬以前写过的一篇文章,总结如下: 以前浏览器通过 8 位字节存储选择器,于是同时出现 256 个选择器溢出到了 id 区域,但是现在这个问题早被 Chrome 修复了。 其它浏览器未验证,当然这只是一种有趣的极端情况,平常开发中应该不会遇到。

有趣:256 个 class 选择器可以干掉 1 个 id 选择器