Question

我有一个表两个css样式：

<style>
    tr:nth-child(even){color:blue; background-color:gray;}
    .SelectedRow {background-color:#f8ffbc;}
</style>

点击我点击我添加SelectedRow类来点击tr。在奇数上它可以工作并改变背景，但即便是它也不起作用

$("tbody td[name='select']").click(function ()
{
      $("tbody tr").removeClass("SelectedRow");
      $(this).closest("tr").addClass("SelectedRow");                          
});

http://jsfiddle.net/qburkd3e/

我应该知道有什么具体的优先事项或其他事项吗？

Answer 1

这是因为CSS选择器优先级。类和伪类的值为10，元素为1.请参阅http://css-tricks.com/specifics-on-css-specificity/

在第一个选择器中，您使用元素和伪类。这是一个11的权重。你的第二个选择器只是一个类，所以它的权重为10.因此，你的第一个选择器胜过第二个选择器。

您可以通过添加元素来增加第二个重量，以赋予它相同的重量。然后，样式表中稍后的那个会占优势。

tr:nth-child(even){color:blue; background-color:gray;}
tr.SelectedRow {background-color:#f8ffbc;}

[CSS]：选择器上两种样式的优先级

1 个答案: