CSS tr悬停，不包含某些类的tr

Question

I have a table which is populated by some JS on opening and as part of that, section headings are given a column span across the whole table as well as a classname of "section". I verified this by an alert in the onmouseover hook for the tr elements which echoed the classname. The classname definitely takes.

I have some CSS like this...

tr:hover {
    background-color: #FF9966
}
thead tr:hover, tr.section:hover {background-color: #DACFE5;!important}

The roll-over works fine and excludes the thead children, but I cant get it to exclude "section" class tr's.

What syntax do I need in the CSS to achieve this?

The table template is...

<table id="myTable" border="1" class="indent">
  <thead>
    <tr> 
      <th colspan="3">Joe's Cafe Menu</th>
    </tr>
    <tr>
      <th>Select</th>
      <th>Item</th>
      <th>Price</th>
    <tr>
  </thead>
  <tbody>
  </tbody>
</table>

EDIT:

Problem was case sensitivity. A rookie error I guess. classname was being echoed in the alert but the member referenced by the CSS is className. I fixed that and now its fine.

This CSS works like a charm...

tbody tr:not(.section):hover {
    background-color: #FF9966
}

For reasons I don't understand, this CSS fails to exclude the header...

tr:not(.section):hover {
    background-color: #FF9966
}
thead tr:hover td {background-color: #DACFE5;}

Which is academic really since its a bit of a hack.

Answer 1

tr:not(.section):hover { background-color: #FF9966 }