选择除了第一个带有CSS的表格中的“tr”之外的所有“tr”元素

How can I select all tr elements except for the first tr in a table with CSS?

如何选择除了第一个tr之外的所有tr元素?

I tried using this method but found that it did not work:

我试着用这种方法，但是没有效果:

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

10 个解决方案

#1

383

By adding a class to either the first tr or 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;
}

#2

217

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)

#3

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}

#4

sounds like the 'first line' you're talking of is your table-header - so you realy should think of using thead and tbody in 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 ... { ... })

听起来你说的“第一行”是你的表头——所以你真的应该考虑在你的标记中使用thead和tbody(点击这里)，这将导致“更好”的标记(语义上正确，对屏幕阅读器很有用)，以及更容易的、跨浏览器友好的css选择(表thead…{…})

#5

Though the question has a decent answer already, I just want to stress that the :first-child tag 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-child on the input portion of the selector.

也就是说，由于输入是子元素，您将第一个子元素放在选择器的输入部分。

#6

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元素按你想要的方式进行，除了第一个和使用psuedo类:第一个孩子，你取消了你为所有tr元素指定的内容。

Better descriped by this example:

这个例子更好地描述了:

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

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

/Patrik

/ Patrik

#7

Another option:

另一个选择:

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

#8

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的帮助。你可以在这里找到它。

#9

-1

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/

这里有一个例子:http://jsfiddle.net/YYTFT/，这是一个很好的解释伪类选择器的来源:http://css-魔术师s.com/伪类选择器

#10

-3

You could create a class and use the class when you define all of your future 's that you want (or don't want) to be selected by the CSS.

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

This would be done by writing

这是通过写作来完成的。

<tr class="unselected">

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

然后在css中有行(并以文本对齐命令为例):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

#1

383