Javascript addClass（）函数未应用于ID 使用DOM $（文档）.ready（函数（） { $（“黄金”）.addClass（“突出显示”）； }); 正文{背景色：#FFCC66；} #包裹 {边距：0自动；边框：2px实心#CC8320；高度：500px；} h1{字体样式：斜体；颜色：#A48713；左侧填充：10px；} #黄金{宽度：200px；背景色：#D49F55；高度：150px；边距：20px；浮点：左；高度：200px} 输入{边框：1px纯黑色；宽度：150px；边距：0 20px；背景色：#AA9F55；颜色：#553F00；字体大小：粗体；文本对齐：居中；} .info{边框：1px纯黑色；宽度：150px；背景色：#AA9F55；颜色：#553F00；字体大小：粗体；文本对齐：中心；边距：0 20px；} .突出显示{背景色：绿色；} 在线学习网络工程黄金会员 HTML5 css3 jquery_Javascript_Jquery_Css

Javascript addClass（）函数未应用于ID 使用DOM $（文档）.ready（函数（） { $（“黄金”）.addClass（“突出显示”）； }); 正文{背景色：#FFCC66；} #包裹 {边距：0自动；边框：2px实心#CC8320；高度：500px；} h1{字体样式：斜体；颜色：#A48713；左侧填充：10px；} #黄金{宽度：200px；背景色：#D49F55；高度：150px；边距：20px；浮点：左；高度：200px} 输入{边框：1px纯黑色；宽度：150px；边距：0 20px；背景色：#AA9F55；颜色：#553F00；字体大小：粗体；文本对齐：居中；} .info{边框：1px纯黑色；宽度：150px；背景色：#AA9F55；颜色：#553F00；字体大小：粗体；文本对齐：中心；边距：0 20px；} .突出显示{背景色：绿色；} 在线学习网络工程黄金会员 HTML5 css3 jquery

javascript jquery css

Javascript addClass（）函数未应用于ID 使用DOM $（文档）.ready（函数（） { $（“黄金”）.addClass（“突出显示”）； }); 正文{背景色：#FFCC66；} #包裹 {边距：0自动；边框：2px实心#CC8320；高度：500px；} h1{字体样式：斜体；颜色：#A48713；左侧填充：10px；} #黄金{宽度：200px；背景色：#D49F55；高度：150px；边距：20px；浮点：左；高度：200px} 输入{边框：1px纯黑色；宽度：150px；边距：0 20px；背景色：#AA9F55；颜色：#553F00；字体大小：粗体；文本对齐：居中；} .info{边框：1px纯黑色；宽度：150px；背景色：#AA9F55；颜色：#553F00；字体大小：粗体；文本对齐：中心；边距：0 20px；} .突出显示{背景色：绿色；} 在线学习网络工程黄金会员 HTML5 css3 jquery,javascript,jquery,css,Javascript,Jquery,Css,我对上面的代码有问题，当使用jquery时，我将类highlight添加到id=gold的元素中，并在chrome中检查它，尽管该类被添加到代码中，但highlight类中提到的样式规则不会在浏览器中输出。正在选择元素，但未设置样式。我做错了什么，请帮助别人。高亮显示得到应用，但由于ID中定义了背景色属性，它不会被类值覆盖正如@cocco所提到的，您可以使用#gold.highlight来覆盖它。将应用highlight，但由于ID中定义了背景色属性，因此它不会被类值覆盖正如@cocco所提

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

高亮显示得到应用，但由于ID中定义了背景色属性，它不会被类值覆盖

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

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

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

您应该使用

！重要信息

要使用它：

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

注:

浏览器使用的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>

注: 浏览器使用的ID的重要性高于类名

将css更改为

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

将css更改为

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

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

换班

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

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

换班

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

您需要更改

的优先级样式。突出显示。只需在之前添加#gold
。突出显示样式
.highlight{background-color:green !important;}

您需要更改的优先级样式。突出显示。只需在之前添加#gold
。突出显示样式
.highlight{background-color:green !important;}

这里的问题是由于CSS选择器的存在。id
选择器将覆盖类
选择器，因此您需要使类选择器更具体（首选方法）：
#gold.highlight{背景色：绿色；}


或者选择性地添加！重要信息
：
。突出显示{背景色：绿色！重要；}

但是，当您有竞争性的时，后者可能会导致问题！重要的
规则，因此最好尽可能避免它。
这里的问题是由于CSS选择器的存在。id
选择器将覆盖类
选择器，因此您需要使类选择器更具体（首选方法）：
#gold.highlight{背景色：绿色；}


或者选择性地添加！重要信息
：
。突出显示{背景色：绿色！重要；}

但是，当您有竞争性的时，后者可能会导致问题！重要信息
规则，因此最好尽可能避免使用它。
。不应用突出显示样式，因为您正在使用更具体的选择器设置背景色：#下次使用浏览器的“inspect element”时，它会工作，并确定您要做什么need@Jahnux73它的工作，因为你正在使用！重要声明。未应用突出显示样式，因为您正在使用更具体的选择器设置背景色：#金色它在下次使用浏览器的“inspect element”时工作，并确定您要做什么need@Jahnux73它的工作，因为你正在使用！重要声明