javascript - CSS 新类不覆盖特定元素样式?

标签 javascript css

在下面的代码中,div“main”从类“main1”切换到“main2”。 测试表明新类别应用(尺寸从 100x200 变为 200x100), 然而,新类不会覆盖预先分配给 div 的背景颜色。 这是正常行为吗?

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

最佳答案

Inline 样式(green)比 class 样式有更高的优先级。(yelloworange 。所以在这种情况下将应用内联样式,除非你有一个更先例的选择器使用 !important

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

关于javascript - CSS 新类不覆盖特定元素样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46902949/

相关文章:

javascript - ionic 切换检查属性

HTML/CSS - 自定义图像边框

javascript - 使用javascript单击相应表行单选按钮时如何获取选择框值?

javascript - 如何在不重绘 map 的情况下重绘标记?谷歌地图

仅限 JQuery 移动样式

html - CSS 使用 100% 的高度和宽度制作 App

html - CSS 功能区无法正确缩放

html - Firefox 的下拉菜单未出现在正确的位置

javascript - 函数参数的问题我可以引用这个函数

javascript - 如何使用 Joi 验证其键应与外部对象的另一个键(其值为数组的键)匹配的嵌套对象?