用html编写奇偶数表格,重置HTML表格中的奇数/偶数序列

3 个答案:

答案 0 :(得分：4)

CSS中最接近动态值的是计数器，但计数器不能与选择器一起使用。除动态伪类外，选择器主要是静态的。您无法使用CSS设置任意值，这将影响选择器与元素的匹配方式。

正如评论中所建议的，使用多个ln -s XcodeDefault.xctoolchain OSX10.10.xctoolchain元素可以更好地表示您的表结构，每个元素对应一个元素。这将还允许您现有的tbody选择器匹配正确的行元素：

:nth-child()

省略了结束标签以保持清洁;仅供参考，这是完全有效的HTML

我保留了＆＃34; SectionHeader＆＃34;来自原始标记的类名，但请注意每个标题单元格上的

属性提供了类名称不适用的相应语义

答案 1 :(得分：3)

由于您没有演示DOM，我将提供一个依赖于特定DOM结构的解决方案：

如果您可以使用和

元素，则问题就变得微不足道了。

tbody tr:nth-child(even) {

background: gray;

}

Header element	Header element
John	Doe
Jane	Doe
John	Doe
Jane	Doe
Header element	Header element
Longer Than The Usual John	Doe
Jane	Doe

答案 2 :(得分：2)

由于共识似乎是单独使用CSS而不改变表格的布局，所以我无法帮助但迎接挑战，所以就是这样。

＆＃13;

＆＃13;

tr.SectionHeader,

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader),

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader),

tr.SectionHeader + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) + tr:not(.SectionHeader) {

background:#EEE}＆＃13;

hdr
hdr
cell
hdr
cell
cell
hdr
cell
cell
cell
hdr
cell
cell
cell
cell

＆＃13;＆＃13;＆＃13;

(适用于最多14个非标题行的序列。如果您需要更多，只需添加更多CSS。)