Question

有一个有效的css规则（jquery只作为最后的机会），只有在有第一行时才允许定义表的所有td的样式。

更具体一点

<table>
  <tr>
    <td>
      STYLE 1 HERE, my background color is white
    </td>
  </tr>
</table>

<table>
  <tr>
    <th>
      some text
    </th>
  </tr>
  <tr>
    <td>
      STYLE 2 HERE, my table has TH, my background color is red
    </td>
  </tr>
</table>

CSS：

th, td {
    background-color:#ffffff
       }

?????? {
         background-color:#ff0000
       }

有办法吗？

提前谢谢， cicciopas

Answer 1

在css中，你无法真正做到这一点。有+“相邻”选择，但这要求节点共享一个直接的共同父节点。如果你有一排混合<td></td><th></th>，那么他们就有资格获得这个资格。但是您的th和td单元格位于不同的行中，因此它们不共享一个共同的<tr>父级。

所以：

th + td {
   color: red
}

适用于

<tr>
   <th>Look ma, I'm red!</th>
   <td>ooer, a header</td>
</tr>

因为他们共享同一个父<tr>，但

<tr>
   <th>Header</th>
</tr>
<tr>
   <td>Dang, not red</td>
</tr>

不会，因为th / td节点有两个不同的父节点。

Answer 2

我认为你的代码有点不对，因为你的第一个背景白色实例的css应该是

tr,td {
     background-color:'ffffff;
}

如果我想要做的是将<td>标签的背景设置在其中有<th>的表中，那么通过纯css你就不能按照你的方式做到这一点设想。

然而，更好的方法是将一个类附加到您希望设置样式的td标签上，如此js小提琴所示。

http://jsfiddle.net/zYQ9h/

Answer 3

我担心你不能，因为我们需要“父”选择器，如：

tr < th ~ tr td { background-color: red; }

这可以理解为“找到包含th的任何tr，并将红色背景应用于它的兄弟姐妹”。

不幸的是，没有<选择器这样的东西，所以我担心你不得不抛出一些jQuery：

$("table:has(tr th)").find("tr td").css("background-color","red");

jQuery选择器中的has()完全符合我们希望的> css选择器。

css：所有td只有表有

3 个答案: