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

4

6 回答 6

1

您需要更改.highlight. 只需在样式#gold前添加.highlight

#gold.highlight{background-color:green;}
于 2013-09-17T11:08:26.980 回答
1

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

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

示例小提琴

或者添加!important到它：

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

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

于 2013-09-17T11:09:05.870 回答
1

你应该使用!important它来工作：

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

笔记：

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

于 2013-09-17T11:07:31.267 回答
1

将你的 CSS 更改为

#gold.highlight{background-color:green;}
于 2013-09-17T11:08:01.250 回答
0

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

改变你的班级

.highlight{background-color:green !important;}
于 2013-09-17T11:08:23.700 回答
0

highlight 被应用，但由于 ID 中定义了 background-color 属性，它不会被类值覆盖。

正如@cocco 所提到的，您可以使用#gold.highlight 来覆盖它。

于 2013-09-17T11:06:30.793 回答