select除CSS中第一个“tr”之外的所有“tr”元素

我怎样才能select所有的tr元素,除了CSS中的表第一个tr

我尝试使用这种方法,但发现它不工作:

http://www.daniel-lemire.com/blog/archives/2008/08/22/how-to-select-even-or-odd-rows-in-a-table-using-css-3/

通过向第一个tr或随后的tr添加一个类。 没有交叉浏览器的方式来select你想用CSS单独的行。

但是,如果您不关心Internet Explorer 6,7或8:

 tr:not(:first-child) { color: red; } 

我很惊讶没有人提到使用IE7和以后支持的兄弟组合器:

 tr + tr /* CSS2, adjacent sibling */ tr ~ tr /* CSS3, general sibling */ 

它们的function完全一样(无论如何都是在HTML表格的情况下):

 tr:not(:first-child) 

理想的解决scheme,但在IE中不支持

 tr:not(:first-child) {css} 

第二个解决scheme是将所有tr的样式,然后用css替代第一个孩子:

 tr {css} tr:first-child {override css above} 

听起来像你所说的第一行是你的表头 – 所以你真的应该考虑在你的标记中使用theadtbody ( 点击这里 ),这将导致“更好”的标记(语义上正确,有用的东西像屏幕阅读器)和更容易,跨浏览器友好的可能性CSSselect( table thead ... { ... }

虽然这个问题已经有了一个体面的答案,但我只想强调:first-child标签会代表孩子的项目types。

例如,在代码中:

 <div id"someDiv"> <input id="someInput1" /> <input id="someInput2" /> <input id="someInput2" /> </div 

如果你只想影响有余量的第二个元素,但不是第一个,你可以这样做:

 #someDiv > input { margin-top: 20px; } #someDiv > input:first-child{ margin-top: 0px; } 

也就是说,由于input是孩子,所以你可以把first-child放在select器的input部分。

对不起,我知道这是旧的,但为什么不按照你想要的样式所有的tr元素,除了第一个和使用psuedo类:第一个孩子,你撤销你指定的所有tr元素。

这个例子更好的描述:

http://jsfiddle.net/DWTr7/1/

 tr { border-top: 1px solid; } tr:first-child { border-top: none; } 

/帕特里克

由于tr:not(:first-child)不受IE 6,7,8的支持。您可以使用jQuery的帮助。 你可以在这里find它

另外一个select:

 tr:nth-child(n + 2) { /* properties */ } 

你也可以在你的CSS中使用伪类select器:

 .desc:not(:first-child) { display: none; } 

这不会将该类应用于类.desc的第一个元素。

这里有一个JSFiddle的例子: http : //jsfiddle.net/YYTFT/ ,这是一个很好的来源来解释伪类select器: http : //css-tricks.com/pseudo-class-selectors/

您可以创build一个类,并在定义您想要(或不想要)由CSSselect的所有未来时使用该类。

这将通过写作完成

 <tr class="unselected"> 

然后在你的CSS有行(并使用text-align命令为例):

 unselected { text-align:center; } selected { text-align:right; }