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

回答

相关问题