Question

因此，如果内联样式的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>

Answer 1

据我所知，你不能用ID覆盖内联CSS。但是你可以这样做：

div[style] {
background-color: yellow !important;
}

Answer 2

不......因为内联样式在“级联”中排在最后无论具体如何，它都会获胜。

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

事实上，这就是你所需要的一切。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用11个堆叠ID和类覆盖内联样式

2 个答案: