Question

  <!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中检查它，尽管类被添加到代码中，高亮类中提到的样式规则不在浏览器中输出。元素正在被选中但没有被设计。我做错了什么，请帮助别人。

Answer 1

您应该使用!important来处理它：

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

注意：

浏览器使用 ID ，其重要性高于类名。

Answer 2

将您的CSS更改为

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

Answer 3

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

之前添加.highlight即可

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

Answer 4

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

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

Example fiddle

或者另外添加!important：

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

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

Answer 5

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

如@cocco所述，您可以使用#gold.highlight覆盖它。

Answer 6

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

改变你的课程

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

addClass（）函数未应用于ID

6 个答案:

注意：