Style every thing except first child

问题:

I know of the selector :not() but it doesn't work, like tr:not(tr:first-child):hover. I want to style the other trs but not the first one, because it holds the headings. How can I do this without using an id or class?

回答1:

You can only use simple selectors in :not(), try

tr:not(:first-child)

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

回答2:

Another option would be to use the th element which is specifically represents the header cell in a table.

Example

<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>

回答3:

Use the adjacent sibling combinator. As a bonus, it's a bit more widely supported than :not()

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

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

回答4:

Put your headers in a <thead> and your stylable rows in the <tbody> then use:

tbody tr:hover { background: red }

and it won't matter what the contents is.

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