tr：nth-child（偶数）帮助。如何申请一个班级？

我对CSS不太好，我需要一些帮助。tr：nth-child（偶数）帮助。如何申请一个班级？

我有一张桌子，我希望每一行都是灰色的，交替的行是白色的。但我只希望它发生在一个特定的桌子上。

我添加了一些代码，我的CSS：

tr:nth-child(even) { 
background: #CCC; 
} 

tr:nth-child(odd) { 
background: #FFF; 
}

但问题是，它影响了我的网站上每个表。我还没有找到任何适用于某个类的例子。那可能吗？我希望它仅适用于：

table.dashboardtable

来源

2009-10-15 user190284

使用CSS后裔组合子（并列）像往常一样：

table.dashboardtable tr:nth-child(even) 
table.dashboardtable tr:nth-child(odd)

来源

2009-10-15 01:09:59 hobbs

谢谢！这正是我需要的。出于某种原因，我在dashboardtable和tr之间划了一个点。多么愚蠢的错误。大声笑。 – user190284 2009-10-15 01:16:43

我想，使用'table.dashboardtable> tr：nth-child'（子选择器'>'）可能是一个好主意，所以如果你有嵌套表，它不会意外地适用于这些。 – 2010-11-08 17:14:29

nth-child和nth-of-type接受odd和even以及一个公式一样an+b，其中a和b是常数。

通常您想使用nth-of-type，它只适用于您指定的类型。这将排除其他因素。如果你想每个偶数TR到有背景颜色，然后再尝试：

tr:nth-of-type(2n){ 
    background: #CCC; 
} 

tr:nth-of-type(2n+1){ 
    background: #FFF; 
}

More info on CSS Selectors

来源

2009-10-15 01:12:22 Marius

我只用ff3试过，但奇数和偶数都在为我工作。如果浏览器不支持这些单词，那么病毒会切换到公式。谢谢！ – user190284 2009-10-15 01:19:34

希望这是它的意义。

<!DOCTYPE html> 

<html> 
    <head> 
    <style type="text/css"> 
     #customers tr:nth-child(even){ 
     background-color:white; 
     } 
     #customers tr:nth-child(odd){ 
     background-color:Lavender; 
     } 
    </style> 
    </head> 

    <body> 
    <p>In your markup define your table:</p> 
     <table id="customers"></table> 
    </body> 
</html>

来源

2012-05-16 22:22:14 Scott

tr：nth-​​child（偶数）帮助。如何申请一个班级？

回答

相关问题

tr：nth-child（偶数）帮助。如何申请一个班级？