CSS 选择除第一个之外的所有 'tr'

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4013701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:02:24  来源:igfitidea点击:

Select all 'tr' except the first one

csscss-selectors

提问by Magnar

How can I select all trelements except the first trin a table with CSS?

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

I tried using thismethod, but found that it did not work.

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

回答by Magnar

By adding a class to either the first tror the subsequent trs. There is no crossbrowser way of selecting the rows you want with CSS alone.

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

However, if you don't care about Internet Explorer 6, 7 or 8:

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

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

回答by BoltClock

I'm surprised nobody mentioned the use of sibling combinators, which are supported by IE7 and later:

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

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

They both function in exactly the same way (in the context of HTML tables anyway) as:

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

tr:not(:first-child)

回答by Mark Steggles

ideal solution but not supported in IE

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

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

second solution would be to style all tr's and then override with css for first-child:

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

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

回答by oezi

sounds like the 'first line' you're talking of is your table-header - so you realy should think of using theadand tbodyin your markup (click here) which would result in 'better' markup (semantically correct, useful for things like screenreaders) and easier, cross-browser-friendly possibilitys for css-selection (table thead ... { ... })

听起来你所说的“第一行”是你的表头 - 所以你真的应该考虑在你的标记(点击这里)中使用theadtbody,这将导致“更好”的标记(语义正确,对屏幕阅读器之类的东西有用) 以及更简单、跨浏览器友好的 css 选择 ( )table thead ... { ... }

回答by CodyBugstein

Though the question has a decent answer already, I just want to stress that the :first-childtag goes on the item type that represents the children.

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

For example, in the code:

例如,在代码中:

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

If you want to affect only the second two elements with a margin, but not the first, you would do:

如果你只想用边距影响后两个元素,而不是第一个,你可以这样做:

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

that is, since the inputs are the children, you would place first-childon the input portion of the selector.

也就是说,由于inputs 是子代,您将放置first-child在选择器的输入部分。

回答by Arman Yeghiazaryan

Another option:

另外一个选项:

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

回答by Tapos

Since tr:not(:first-child)is not supported by IE 6, 7, 8. You can use the help of jQuery. You may find it here

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

回答by Patrik

Sorry I know this is old but why not style all tr elements the way you want all except the first and the use the psuedo class :first-child where you revoke what you specified for all tr elements.

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

Better descriped by this example:

这个例子更好地描述了:

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

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

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

/Patrik

/帕特里克

回答by Kokkonda Abhilash

May be someone can benefit, below is what I used

可能有人可以受益,以下是我使用的

ol li:not(:first-child) {
    background: black;
    color: white;
}

回答by James

You could also use a pseudo class selector in your CSS like this:

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

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

That will not apply the class to the first element with the class .desc.

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

Here's a JSFiddle with an example: http://jsfiddle.net/YYTFT/, and this is a good source to explain pseudo class selectors: http://css-tricks.com/pseudo-class-selectors/

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