html - 用11个堆叠的ID和一个类覆盖内联样式

This question already has answers here:

How are the points in CSS specificity calculated

                                    （7个答案）


                                3年前关闭。


因此，如果内联样式的CSS特异性为1000，而ID的特异性为100，则将11个ID与类堆叠在一起应该覆盖内联样式，而不使用！important声明。

那么，为什么这不起作用？我认为CSS有一个得分最高的点系统。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        #a > #b > #c > #d > #e > #f > #g > #h > #i > #j > #k > div.foo {
            background-color: red;
        }


    </style>
  </head>

  <body>
      <div id="a">
          <div id="b">
              <div id="c">
                  <div id="d">
                      <div id="e">
                          <div id="f">
                              <div id="g">
                                  <div id="h">
                                      <div id="i">
                                          <div id="j">
                                              <div id="k">
                                                  <div style="background-color: blue;" class="foo">FOOOO</div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

最佳答案

否...因为内联样式在“层叠”中排在最后，因此无论其具体性如何，它都会取胜。

只能通过添加!important覆盖它。

实际上，这就是您所需要的。

 div.foo {
   background-color: red !important;
 }

<body>
  <div id="a">
    <div id="b">
      <div id="c">
        <div id="d">
          <div id="e">
            <div id="f">
              <div id="g">
                <div id="h">
                  <div id="i">
                    <div id="j">
                      <div id="k">
                        <div style="background-color: blue;" class="foo">FOOOO</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>