Question

在以下代码中，div＆＃34; main＆＃34;来自班级＃34; main1＆＃34;到＆＃34; main2＆＃34;。测试表明应用了新类（大小从100x200变为200x100），但是新课程不会覆盖预先分配给div的背景颜色。这是正常行为吗？

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main1 {width:100px; height:200px; background-color:yellow;}
      .main2 {width:200px; height:100px; background-color:orange;}
    </style>
    <script>
      function start() {
        document.getElementById("main").style.backgroundColor = "green";
        document.getElementById("main").className = "main2";
      }
    </script>
  </head>
  <body onload="start();">
    <div id="main" class="main1"></div>
  </body>
</html>

＆＃13;

Answer 1

内嵌样式（green）优先于类样式。（yellow和orange。所以内联样式将在这种情况下应用，除非你有一个更先进的选择器使用!important

说些什么

检查这个答案： What is the order of precedence for CSS?

Answer 2

因为首先加载内联CSS，如果你想要应用 background-color：orange ;然后添加！important ，例如 background-color：orange！important;

CSS新类不会覆盖特定的元素样式？

2 个答案: