在一个 HTML 元素上应用多个 CSS 类 (jQuery addClass)答案

【问题标题】：Apply Multiple CSS classes on an HTML element (jQuery addClass)在一个 HTML 元素上应用多个 CSS 类 (jQuery addClass)
【发布时间】：2009-04-16 15:34:19
【问题描述】：

鉴于此 HTML：

<html>
<head>
  <style type="text/css">
    tr.Class1
    {
      background-color: Blue;
    }
    .Class2
    {
      background-color: Red;
    }
  </style>
</head>
<body>
  <table>
    <tr id="tr1">
      <td>Row 1</td>
    </tr>
    <tr id="tr2">
      <td>Row 2</td>
    </tr>
  </table>
</body>
</html>

下面是脚本部分。当我点击第一行时会发生什么？它会保持蓝色，还是会变成红色？如果它保持蓝色，我如何让它变成红色而不是从行中删除 Class1 类（这样我可以稍后删除 Class2 类并且该行将恢复到原来的蓝色）？

<script type="text/javascript" language="javascript">

  $(document).ready(function() {
    $("#tr1").addClass("Class1");

    $("tr").click(function() {
      /* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */

      $(".Class2").removeClass("Class2");
      $(this).addClass("Class2");
    });
  });

</script>

编辑我应该说 - 我试过这个，但它没有按预期工作（在 FireFox 或 IE 中）。怎么回事？

【问题讨论】：

鉴于您上面的代码，正如预期的那样，它对我来说变成了红色。如果它不适合你，你有其他代码或规则在交互，我们看不到。

标签： jquery html css

【解决方案1】：

它应该变成红色...这就是为什么它被称为层叠样式表...新添加的属性会覆盖旧的。

【讨论】：

我知道，但我没有这种行为。

【解决方案2】：

Mozilla 说here：

如果在两个规则，冲突就解决了首先通过特异性，然后根据CSS的顺序声明。类的顺序类属性不相关。

但这不是我得到的行为。

【讨论】：

【解决方案3】：

试试这个：

 $("tr").click(function() {
  /* clicked tr's should use the Class2 class to indicate selection, but only one  should be selected at a time */

  $(".Class2").removeClass("Class2");
  $(this).toggleClass("Class1");
  $(this).addClass("Class2");
  $(this).toggleClass("Class1");
});

我不知道它是否会起作用，但也许它会让您更深入地了解问题。

【讨论】：

【解决方案4】：

想通了。我举的例子有点不正确。 CSS 实际上看起来像：

tr.Class1
{
  background-color: Blue;
}
.Class2
{
  background-color: Red;
}

因此，最具体的规则适用，就像 Mozilla 告诉我的here：

如果在两个规则，冲突就解决了首先通过特异性，然后根据CSS的顺序声明。类的顺序类属性不相关。

【讨论】：