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

CSS

Gil

2020-03-24

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

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

第3406篇《选择除第一个以外的所有“ tr”》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

10个回答
SamL 2020.03.24

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

猴子村村 2020.03.24

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

这可以通过编写完成

<tr class="unselected">

and then in your css having the lines (and using the text-align command as an example) :

unselected {
  text-align:center;
}



selected {
  text-align:right;
}
2020.03.24

另外的选择:

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

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

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

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

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

番长猴子 2020.03.24

令我惊讶的是,没有人提到使用同级组合器,而IE7和更高版本支持这种组合器:

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

它们两者的功能完全相同(无论如何在HTML表的上下文中),其方式如下:

tr:not(:first-child)
TomDavaid 2020.03.24

抱歉,我知道这很旧,但是为什么不按您希望的所有样式设置所有tr元素的样式(第一个元素除外),并使用psuedo类:first-child撤消为所有tr元素指定的内容。

此示例更好地描述了:

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

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

/帕特里克

古一 2020.03.24

听起来您正在谈论的“第一行”是表格标题-因此,您确实应该考虑使用theadtbody在标记中(单击此处),这将导致“更好”的标记(从字面上看是正确的,对屏幕阅读器等有用) ),以及更轻松,跨浏览器友好的css选择(table thead ... { ... }

斯丁前端 2020.03.24

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

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

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

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

尽管问题已经有了一个不错的答案,但我只想强调一下,: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在选择器的输入部分。

蛋蛋猿 2020.03.24

通过将类添加到第一个tr或后续的trs中。没有单独使用CSS来选择所需行的跨浏览器方法。

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android