2

まずはサンプルコードをお見せしましょう

#tbl tr:hover {
  background-color: #FFA270 !important;
}

#tbl td:nth-child(odd) {
  background-color: #F0FFE2;
}

.cell {
  height: 5ex;
  width: 5em;
  background-color: #E2F1FF;
  text-align: center;
}
<table id="tbl">
  <tr>
    <td class="cell">001</td>
    <td class="cell">002</td>
    <td class="cell">003</td>
    <td class="cell">004</td>
  </tr>
  <tr>
    <td class="cell">001</td>
    <td class="cell">002</td>
    <td class="cell">003</td>
    <td class="cell">004</td>
  </tr>
  <tr>
    <td class="cell">001</td>
    <td class="cell">002</td>
    <td class="cell">003</td>
    <td class="cell">004</td>
  </tr>
  <tr>
    <td class="cell">001</td>
    <td class="cell">002</td>
    <td class="cell">003</td>
    <td class="cell">004</td>
  </tr>
</table>

私が期待すること：テーブルの列は2色で色付けされ、マウスをセルに合わせると、行全体がオレンジ色で強調表示されます。

コードが実際に行ったこと: 表の列は 2 色で表示され、ホバリングしても何も起こりませんでした。

.celland#tbl tdは よりも具体的だと思います#tbl tr。そのため、ホバー スタイルが無視されましたが、修正方法がわかりません。助けてください。ありがとう。

4

1 に答える 1

4

特異性について詳しく調べる必要があります: http://www.standardista.com/css3/css-specificity/

#idセレクター = 100「ポイント」

.classおよび:pseudo-classセレクター = 10「ポイント」

あなたの特定のケースでは、これでうまくいきます：

#tbl td:nth-child(odd){
    background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
    background-color:#FFA270;
}
于 2013-05-20T09:45:17.640 に答える