除了第一个子元素外，样式化所有东西

Question

我知道选择器:not()，但它不起作用，如tr:not(tr:first-child):hover。我想给其他的添加样式，但不想给第一个添加样式，因为它包含标题。我该怎么做，而不使用id或class？

- Federico Piragua

Answer 1

在 :not() 中，您只能使用简单选择器，请尝试使用。

tr:not(:first-child)

http://jsfiddle.net/mowglisanu/Sn7Uw/

- Musa

Answer 2

另一种选择是使用th元素，它专门表示表格中的标题单元格。

示例

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>element</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4.1.1</td>
      <td>html</td>
    </tr>
    <tr>
      <td>4.2.1</td>
      <td>head</td>
    </tr>
  </tbody>
</table>

- thgaskell

---

另外两个答案很聪明，但这个在语义上更准确。 - Jason Sperske

@thgaskell 这样做不容易使行的样式变得简单。 - stevemarvell

th { /* rules */ } 太难了吗？ - thgaskell

Answer 3

使用相邻兄弟选择器。作为奖励，它比:not()更广泛地得到支持。

TR + TR { background-color: silver; }
TR + TR:hover { background-color: green; }

http://jsfiddle.net/ETYQN/2/

- Tim M.

Answer 4

将您的表头放在<thead>中，将可样式化的行放在<tbody>中，然后使用以下代码：

tbody tr:hover { background: red }

而它的内容是什么并不重要。

http://jsfiddle.net/stevemarvell/we4a6/

- stevemarvell