使用css选择器选择没有表头的表行

Question

使用css选择器我应该如何编写一个选择器，以便只有具有数据的表行显示游标作为指针。我试过下面但是没有

table tbody tr:not(tr>th)

是IE6中的跨浏览器和工作事件吗？

Answer 1

这不是一个有效的CSS选择器;你不能把组合器放在:not()里面。

最好的办法是将标题行（即包含<tr>元素的<th>元素）放在<thead>中，将剩下的行留在表<tbody>中，只需使用它：

table tbody tr {
    cursor: pointer;
}

如果你不能修改你的HTML，单靠CSS选择器是不可能的，特别是你不需要支持IE6。请改用JavaScript;这是一个强制性的jQuery示例：

$('table tbody tr:not(:has(th))').css('cursor', 'pointer');

Answer 2

假设 您的标题行始终是第一行，您可以这样做：

table tr:not(:first-child) {
    background:red;
}​

这会选择所有tr元素，除first-child之外（如第一个匹配的元素）。

此 不能在IE6或IE9以外的任何其他版本的IE中工作。

但是，如果您确实需要IE6支持，则必须使用Javascript。

Answer 3

你可以使用＆lt; thead＆gt;来做到这一点标签

在我的案例中，表格如下：

<table>
  <thead> <tr><th>... </thead>
  <tbody> <tr><td>... </tbody>
</table>

这将适用于所有表格：

tbody tr{
      background: yellow;
}

这仅适用于具有标题的表：

thead+tbody tr{
      background: red;
}

Answer 4

我基本上尝试了上面的解决方案，但就我而言，我写了一些不同的方法来使其起作用。我不知道对光标使用:hover是否更好。

table tbody>tr:hover {
   cursor: pointer;
}

在我的情况下，表是这样编码的

<table>
  <thead>
    <tr>...</tr>
     ....
  </thead>
  <tbody>
   <tr>...</tr>
    ...
</table>

我只是想为整行添加样式，而不是自己tr