CSS奇/偶td嵌套

我想用奇/偶樣式想出我的行風格。該行將被標記爲odd/even類，但該樣式需要應用於包含的td/th。CSS奇/偶td嵌套

風格不能直接放在行上的原因是因爲應用背景顏色而不是td/th會導致某些瀏覽器中的結果不一致。

當我將顏色應用於td/th時，它會在嵌套場景中導致問題。

<html><head><title>Nesting</title></head><body> 

<style type="text/css"> 
    .even td, .even th { 
     background-color: #FBFCFD; 
    } 
    .odd td, .odd th { 
     background-color: #FEFFFF; 
    } 
</style> 

<table width="100%"> 
    <tr class="even"> 
     <th>Test</th> 
     <td>Test</td> 
    </tr> 
    <tr class="odd"> 
     <th>Test</th> 
     <td>Test</td> 
    </tr> 
    <tr class="even"> 
     <th>Test</th> 
     <td>Test</td> 
    </tr> 
    <tr class="odd"> 
     <th>Test</th> 
     <td> 

      <table width="100%"> 
       <tr class="even"> 
        <th>Test</th> 
        <td>Test</td> 
       </tr> 
       <tr class="odd"> 
        <th>Test</th> 
        <td>Test</td> 
       </tr> 
       <tr class="even"> 
        <th>Test</th> 
        <td>Test</td> 
       </tr> 
       <tr class="odd"> 
        <th>Test</th> 
        <td> 

         <table width="100%"> 
          <tr class="even"> 
           <th>Test</th> 
           <td>Test</td> 
          </tr> 
          <tr class="odd"> 
           <th>Test</th> 
           <td>Test</td> 
          </tr> 
          <tr class="even"> 
           <th>Test</th> 
           <td>Test</td> 
          </tr> 
          <tr class="odd"> 
           <th>Test</th> 
           <td>Test</td> 
          </tr> 
         </table> 

        </td> 
       </tr> 
      </table> 

     </td> 
    </tr> 
</table> 

</body></html>

什麼是理想的是，如果我可以做下面的事情，但不幸的是它可以在舊版瀏覽器中工作。

<style type="text/css"> 
    .even > td, .even > th { 
     background-color: #FBFCFD; 
    } 
    .odd > td, .odd > th { 
     background-color: #FEFFFF; 
    } 
</style>

看到問題現場 - 關於在CSS轉換脣上和賠率http://jsfiddle.net/fB9Db/

來源

2011-07-10 vdh_ant

對不起，你必須支持IE6。 – BoltClock

你是反對使用JavaScript？ – Eric

只是IE6不支持'>'嗎？ –

如何？

http://jsfiddle.net/fB9Db/1/

<style type="text/css"> 
    .even td, .even th { 
     background-color: #FBFCFD; 
    } 
    .odd td, .odd th { 
     background-color: #FEFFFF; 
    } 
</style>

的另一件事是，你可以使用紅色覆蓋整個表格框的背景，然後分配背景顏色只賠率..

來源

2011-07-10 22:00:03 Joonas

你正在編寫CSS對於偶數/奇數td和th，然後將這些類放在tr上。爲什麼？

嘗試將CSS應用於正確的html元素。這可能對你更好。嵌套html元素時，也必須嵌套CSS樣式。

.even, td, .even table td, .even table table td, { background-color: #FFFFF; } 
.odd td, .odd table td, .odd table table td { background-color: #000000; }

這應該照顧至少嵌套2層的表格。添加更多更多的嵌套。

來源

2013-03-23 14:39:52 JustDroppedBy

我的建議是像你自己發佈使用直接子選擇：

<style type="text/css"> 
    .even > td, .even > th { 
     background-color: #FBFCFD; 
    } 
    .odd > td, .odd > th { 
     background-color: #FEFFFF; 
    } 
</style>

這樣做的瀏覽器的支持幾乎是普遍的。唯一缺少的瀏覽器是IE6，微軟和世界上的許多網頁都不再支持它。

在這裏看到支持它的瀏覽器的列表：

http://www.quirksmode.org/css/selectors/

What browsers support CSS #parent > .direct-child notation? (no jQuery)

來源

2013-03-23 14:51:11 aKzenT

CSS奇/偶td嵌套

回答

相關問題