html5除了第一选择器,html - 选择除C中表格中第一个'tr'之外的所有'tr'元素

html - 选择除C中表格中第一个'tr'之外的所有'tr'元素

如何在CSS表格中选择除第一个tr之外的所有tr元素？

我尝试使用此方法，但发现它不起作用：

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

10个解决方案

402 votes

通过向第一个tr或后续trs添加类。 没有crossbrowser方法可以单独使用CSS选择所需的行。

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

tr:not(:first-child) {

color: red;

}

Magnar answered 2019-02-27T21:43:41Z

219 votes

我很惊讶没有人提到兄弟组合器的使用，这些组合器得到IE7及更高版本的支持：

tr + tr /* CSS2, adjacent sibling */

tr ~ tr /* CSS3, general sibling */

它们都以完全相同的方式运行(无论如何在HTML表的上下文中)：

tr:not(:first-child)

BoltClock answered 2019-02-27T21:44:13Z

26 votes

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

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

第二个解决方案是设置所有tr的样式，然后使用css覆盖first-child：

tr {css}

tr:first-child {override css above}

Mark Steggles answered 2019-02-27T21:44:44Z

10 votes

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

oezi answered 2019-02-27T21:45:10Z

2 votes

虽然这个问题已经有了不错的答案，但我只想强调:first-child标签用于代表孩子的项目类型。

例如，在代码中：

如果你想只影响带有边距的后两个元素，而不是第一个，你会这样做：

#someDiv > input {

margin-top: 20px;

}

#someDiv > input:first-child{

margin-top: 0px;

}

也就是说，由于inputs是子节点，您可以在选择器的输入部分放置first-child。

CodyBugstein answered 2019-02-27T21:45:57Z

1 votes

对不起，我知道这是旧的，但为什么不按照你想要的方式设置所有tr元素，除了第一个和使用psuedo类：first-child，你撤销你为所有tr元素指定的内容。

这个例子更好地描述了：

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

tr {

border-top: 1px solid;

}

tr:first-child {

border-top: none;

}

/帕特里克

Patrik answered 2019-02-27T21:46:44Z

1 votes

另外一个选项：

tr:nth-child(n + 2) {

/* properties */

}

Arman Yeghiazaryan answered 2019-02-27T21:47:05Z

0 votes

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

Tapos answered 2019-02-27T21:47:32Z

-1 votes

您还可以在CSS中使用伪类选择器，如下所示：

.desc:not(:first-child) {

display: none;

}

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

这是一个带有示例的JSFiddle：[http://jsfiddle.net/YYTFT/，]这是解释伪类选择器的一个很好的来源：[http://css-tricks.com/pseudo-class-selectors/]

James answered 2019-02-27T21:48:12Z

-3 votes

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

这可以通过写作来完成

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

unselected {

text-align:center;

}

selected {

text-align:right;

}

user476033 answered 2019-02-27T21:48:53Z