Question

鉴于此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中）。发生了什么事？

Answer 1

它应该变成红色...这就是为什么它被称为级联样式表...属性的新增加会覆盖旧版本。

Answer 2

Mozilla说here：

如果声明了相同的属性这两个规则，冲突得到解决先通过特异性，然后根据CSS的顺序声明。班级的顺序 class属性不相关。

但这不是我得到的行为。

Answer 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");
});

我不知道它是否会起作用，但也许会让你更多地解决这个问题。

Answer 4

想出来。我把我的例子弄错了一点。 CSS实际上看起来像：

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

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

如果声明了相同的属性这两个规则，冲突得到解决先通过特异性，然后根据CSS的顺序声明。班级的顺序 class属性不相关。

在HTML元素上应用多个CSS类（jQuery addClass）

4 个答案: