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

Posted 2023-03-06

【中文标题】选择除第一个之外的所有“tr”

【英文标题】：Select all 'tr' except the first one

【发布时间】：2011-04-30 03:31:23

【问题描述】：

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

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

【问题讨论】：

这需要兼容哪些浏览器？

w3schools.com/CSS/css_pseudo_classes.asp

@Pekka 的问题很重要，因为我想不出任何方法可以使用适用于各种版本的 IE 的标准 CSS 来做到这一点。如果您需要支持 IE，唯一可行的解​​决方案是为第一个 <tr> 设置一个类，然后为其余的一个不同的类。

我不担心 IE 但它会在 FF 和 GC 中工作

【参考方案1】：

另一种选择：

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

【参考方案2】：

虽然这个问题已经有了不错的答案，但我只想强调: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;

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

【参考方案3】：

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

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

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

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

【讨论】：

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

【参考方案4】：

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

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

它们的功能完全相同（无论如何在 html 表格的上下文中）：

tr:not(:first-child)

【讨论】：

等等...这应该是公认的答案吗？你不能从那个声明中得到“除了第一个”，这就是 OP 所要求的。 tr+tr 会给你一个单一的元素。我猜 tr~tr 会得到你们所有人（我猜像 parent:first-child~tr 之类的东西），但在语法上不像不是那样可读：

@hairbo: tr+tr 将为您提供直接跟随另一个 tr 的任何 tr。如果你有一个三行表，第三行直接跟在第二行之后，所以它也会匹配。如果你使用 tr:first-child+tr 代替，你只会得到一个元素。 + 和 ~ 之间的唯一区别是 ~ 允许在所提到的两者之间存在任意数量的其他元素。

只是想补充一点，elem + elem 是一个很好的通用解决方案，当您要定位的元素不是唯一的子元素时。例如，如果<h2> 后跟多个<p> 标记，则在这种情况下，第一个<p> 不是第一个孩子。

【参考方案5】：

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

【参考方案6】：

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

tr:not(:first-child) css

第二种解决方案是设置所有 tr 的样式，然后用 css 覆盖第一个孩子：

tr css
tr:first-child override css above

【参考方案7】：

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

通过这个例子更好地描述：

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

tr 
    border-top: 1px solid;

tr:first-child 
    border-top: none;   

/帕特里克

【参考方案8】：

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

【参考方案9】：

通过向第一个 tr 或随后的 trs 添加一个类。没有跨浏览器的方式可以单独使用 CSS 选择所需的行。

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

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

【讨论】：

我还想指出 tr:not(:first-of-type) 也是一个潜在的解决方案，如果您正在寻找特定选择器的第一个实例而不是第一个通用子级。

我认为在 2019 年我们已经完成了 IE（不到 0.5% 的 IE6 到 IE10 的用户

css_selector_here:nth-child(n + 2) /* properties */ 选择选择器中不是其父项的第一个子项的每个 DOM 元素。换句话说，除了第一个之外，父元素的每个子元素。所以，这会影响多个父节点中的子节点，而不仅仅是一个。

【参考方案10】：

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

这可以通过写作来完成

<tr class="unselected">

然后在你的 css 中包含这些行（并使用 text-align 命令作为示例）：

unselected 
  text-align:center;




selected 
  text-align:right;

【讨论】：

请在回答前理解问题