0

子テーブルのtr内にテーブルがあります。ホバーとゼブラストライプを適用したくありません。以下は機能していないコードです。子テーブルにはホバーとゼブラストライプが表示されています。

<table class='zebrastrip'>
   <tr>
    <td>1</td>
    <td>2</td>
   </tr>
   <tr>
     <td>3</td>
     <td>4</td>
   </tr>
   <tr>
      <table class='atable'>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
      </table>
  </tr>
</table>

   .atable tr:nth-child(2n-1){
        background-color:#FFFFFF;
    }
   .atable tr:hover{
     background-color:#FFFFFF;
   }
    .zebrastrip tr:nth-child(2n-1){
        background-color:#f9f9f9;
    }
    .zebrastrip tr:hover{
        background-color:#fce4cc;
    }

ありがとう

4

1 に答える 1

1

固定コードのフィドル: http://jsfiddle.net/r3eAn/

固定 HTML:

<table class='zebrastrip'>
   <tr>
    <td>1</td>
    <td>2</td>
   </tr>
   <tr>
     <td>3</td>
     <td>4</td>
   </tr>
   <tr>
      <td colspan="2">
          <table class='atable'>
            <tr>
              <td>5</td>
              <td>6</td>
            </tr>
            <tr>
              <td>7</td>
              <td>8</td>
            </tr>
          </table>
      </td>
  </tr>
</table>

内部テーブルの背景が常に #fff になるように CSS を修正しました。

内側のテーブル スタイルの優先度が高い

内部テーブルの背景定義

.zebrastrip tr:nth-child(2n-1){
    background-color:#f9f9f9;
}
.zebrastrip tr:hover{
    background-color:#fce4cc;
}
.zebrastrip .atable{
    background: #FFFFFF;
}
.zebrastrip .atable tr:nth-child(2n-1){
    background-color:#FFFFFF;
}
.zebrastrip .atable tr:hover{
    background-color:#FFFFFF;
}
于 2012-11-07T10:00:50.647 に答える