选择所有'tr'除了第一个

我如何选择所有的tr元素除了第一个tr在一个表与CSS?

我尝试使用这方法，但发现它不起作用。

204683 次浏览
小开
最佳答案

通过向第一个tr或随后的tr中添加类。没有跨浏览器的方法来选择你想要的行仅用CSS。

然而，如果你不关心ie6、ie7或ie8:

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

理想的解决方案，但IE不支持

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

第二个解决方案是为所有tr设置样式，然后为第一个子重写CSS:

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

您可以创建一个类，并在定义所有希望(或不希望)被CSS选择的future时使用该类。

这可以通过书写来完成

<tr class="unselected">

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

unselected {
text-align:center;
}






selected {
text-align:right;
}
小开

听起来好像你说的“第一行”是你的表标题-所以你真的应该考虑在你的标记(点击这里)中使用thead和tbody，这将导致“更好的”标记(语义正确，对屏幕阅读器等有用)和更简单，跨浏览器友好的css选择可能性(table thead ... { ... })。

小开

因为IE 6、7、8不支持tr:not(:first-child)。可以使用jQuery的帮助。 你可能会发现它在这里

小开

抱歉，我知道这是旧的，但为什么不样式所有tr元素的方式，除了第一个和使用pseudo类:first-child，你撤销你指定的所有tr元素。

下面这个例子可以更好地描述:

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

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

/ Patrik

小开

我很惊讶居然没有人提到兄弟组合子的使用，IE7及后续版本都支持兄弟组合子:

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

它们的功能完全相同(在HTML表的上下文中):

tr:not(:first-child)
小开

你也可以像这样在CSS中使用伪类选择器:

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

这将不会将类应用到带有.desc类的第一个元素。

下面是一个JSFiddle的例子:http://jsfiddle.net/YYTFT/，这是一个很好的来源来解释伪类选择器:http://css-tricks.com/pseudo-class-selectors/

小开

虽然这个问题已经有了一个不错的答案，但我只想强调:first-child标记放在代表子元素的项目类型上。

例如，在代码中:

<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;
}

也就是说，因为__abc0是子元素，你可以把first-child放在选择器的输入部分。

小开

另一个选择:

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

提交答案