选择除第一个以外的所有“tr”

Question

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

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

- Steven Spielberg

---

这需要兼容哪些浏览器？ - Pekka

http://www.w3schools.com/CSS/css_pseudo_classes.asp - Badr Hari

@Pekka的问题非常重要，因为我想不到任何使用标准CSS的方法可以与各种版本的IE一起使用。如果您需要支持IE，则唯一可行的解决方案是为第一个<tr>创建一个类，并为其余的<tr>创建另一个类。 - Spudley

我不担心IE，但它将在FF和GC中工作。 - Steven Spielberg

Answer 1

通过将类添加到第一个tr或后续的tr中，可以实现选定所需行的效果。但是，仅使用CSS无法跨浏览器选择所需的行。

然而，如果您不关心Internet Explorer 6、7或8：

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

- Magnar

---

如果您正在寻找特定选择器的第一个实例而不是第一个广义子元素，我还想指出tr:not(:first-of-type)也可能是一个解决方案。 - Joshua Burns

我认为在2019年，IE已经被淘汰了（IE6到IE10版本的用户不到0.5%）。 - Webwoman

css_selector_here:nth-child(n + 2) { /* properties */} 选择所有选择器的 DOM 元素，但不包括其父元素的第一个子元素。换句话说，它会影响多个父节点中的子节点，而不仅仅是一个。 - Alan Wells

Answer 2

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

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

它们在 HTML 表格的上下文中以完全相同的方式工作：

tr:not(:first-child)

- BoltClock

---

等等...这怎么能成为被接受的答案呢？你无法从那个语句中得到“除第一个之外的所有内容”，这正是OP所问的。tr+tr只会得到单个元素。我猜trtr会得到所有内容（我猜类似于parent:first-childtr），但不如not语法可读。 - hairbo

@hairbo：tr+tr会获取任何直接跟在另一个tr后面的tr。如果你有一个三行的表格，第三行直接跟在第二行后面，所以它也会匹配。如果你使用tr:first-child+tr，你只会得到一个元素。+和之间唯一的区别是，允许在两个提到的元素之间有任意数量的其他元素。 - BoltClock

只是想补充一下，elem + elem 是一个很好的通用解决方案，适用于你想要定位的元素不是唯一子元素的情况。例如，如果一个 <h2> 后面跟着几个 <p> 标签，那么第一个 <p> 在这种情况下就不是第一个子元素了。 - DisgruntledGoat

Answer 3

理想方案，但不受IE支持

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

第二种解决方案是为所有的tr添加样式，然后使用css来覆盖第一个子元素的样式：

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

- Mark Steggles

Answer 4

另一种选择：

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

- Arman Yeghiazaryan

Answer 5

听起来你提到的“第一行”应该是你的表头 - 因此你真的应该考虑在你的标记中使用thead和tbody（请点击这里），这将产生“更好”的标记（语义正确，对于像屏幕阅读器这样的东西很有用），并且更容易、跨浏览器友好地进行CSS选择（table thead ... { ... }）。

- oezi

Answer 6

尽管这个问题已经有一个不错的答案，但我想强调一下，:first-child 标签应该放在代表子元素的项目类型上。

例如，在以下代码中：

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

如果您只想通过margin影响后两个元素而不是第一个元素，那么您应该这样做：

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

也就是说，由于是子元素，所以你需要在选择器的部分放置first-child。

- CodyBugstein

Answer 7

抱歉，我知道这是老问题，但为什么不将所有tr元素样式设置为所需样式，除了第一个元素，然后使用伪类:first-child来撤销所有tr元素指定的样式。

通过以下示例更好地描述：

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

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

/帕特里克

- Patrik

Answer 8

由于IE 6、7、8不支持tr:not(:first-child)，您可以使用jQuery的帮助。在这里您可以找到相关信息。

- Tapos

Answer 9

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

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

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

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

- James

---

这不会应用于第一个元素，即点的样式。first-child会忽略类。 - Fez Vrasta

Answer 10

你可以创建一个类并在定义所有未来的“s”时使用该类，这些“s”您希望（或不希望）被CSS选择。

这可以通过编写以下内容来完成：

<tr class="unselected">

然后在你的CSS中加入以下代码（以text-align命令为例）：

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

- user476033

---

请在回答之前理解问题。 - Ammar Bozorgvar