addClass() 函数未应用于 ID

  <!DOCTYPE html>
     <head>
        <meta charset="UTF-8">
          <title>Working With DOM</title>
           <script src="jquery.js"></script>
          <script type="text/javascript">
      $(document).ready(function()
        {
            $("#gold").addClass("highlight");
        });
        </script>
       <style type="text/css">
        body{background-color:#FFCC66;}
        #wrap
       {margin:0 auto;
       border:2px solid #CC8320;
        height:500px;}
       h1{font-style:italic;
       color:#A48713; padding-left:10px;}

         #gold{width:200px;
        background-color:#D49F55;
         height:150px; margin:20px; float:left;height:200px}
        input{border:1px solid black; width:150px; margin:0 20px;           
       background-color:#AA9F55; color:#553F00;font-weight:bolder;text-align:center; }
      .info{border:1px solid black; width:150px;background-color:#AA9F55;        color:#553F00;font-weight:bolder;text-align:center;margin:0 20px; }
     .highlight{background-color:green;}
       </style>
    </head>
 <body>
     <div id="wrap">
     <h1> Learning Web Engineering Online</h1>

        <div  data-price="399.99" id="gold">
            <h3>Gold Member</h3>
           <ul class="course">
             <li>HTML5</li>
             <li>css3</li>
             <li>jquery</li>
          </ul>
     <form>
        <input type="button" value="GET PRICE"/>
      </form>
   </div>
  </div>
</body>

我对上面的代码有问题，当使用 jquery 时，我将类突出显示添加到 id=gold 的元素并在 chrome 中检查它，尽管该类正在添加到代码中，突出显示类中提到的样式规则不会在浏览器中输出。元素正在被选中，但未设置样式。我做错了什么，请帮助别人。

你应该

使用!important来工作：

.highlight{background-color:green !important;}

注意：

浏览器使用的 ID 比类名更重要。

将 css 更改为

#gold.highlight{background-color:green;}

您需要更改.highlight的优先级样式。只需在.highlight样式之前添加#gold

#gold.highlight{background-color:green;}

这里的问题是由于CSS选择器的优先级。id选择器将覆盖class选择器，因此您需要使类选择器更具体（首选方法）：

#gold.highlight { background-color: green; }

示例小提琴

或者永久地添加!important：

.highlight { background-color: green !important; }

但是，当您有竞争!important规则时，后者可能会导致问题，因此最好尽可能避免它。

突出显示被

应用，但由于ID中定义了背景颜色属性，因此不会被类值覆盖。

如@cocco所述，您可以使用 #gold.突出显示来覆盖它。

由于

冲突解决，Id 具有更高的精度，类 css 被您的 #gold id css 覆盖

更改您的班级

.highlight{background-color:green !important;}

注意：

相关内容

最新更新

热门标签：