如何在CSS表中选择tr
除第tr
一个元素以外的所有元素?
我尝试使用此方法,但发现它不起作用。
如何在CSS表中选择tr
除第tr
一个元素以外的所有元素?
我尝试使用此方法,但发现它不起作用。
您可以创建一个类,并在定义要(或不希望)由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;
}
另外的选择:
tr:nth-child(n + 2) {
/* properties */
}
您还可以在CSS中使用伪类选择器,如下所示:
.desc:not(:first-child) {
display: none;
}
这不会将该类应用于具有.desc类的第一个元素。
下面是用一个例子一的jsfiddle:http://jsfiddle.net/YYTFT/,这是一个很好的来源解释伪类选择:http://css-tricks.com/pseudo-class-selectors/
令我惊讶的是,没有人提到使用同级组合器,而IE7和更高版本支持这种组合器:
tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */
它们两者的功能完全相同(无论如何在HTML表的上下文中),其方式如下:
tr:not(:first-child)
抱歉,我知道这很旧,但是为什么不按您希望的所有样式设置所有tr元素的样式(第一个元素除外),并使用psuedo类:first-child撤消为所有tr元素指定的内容。
此示例更好地描述了:
tr {
border-top: 1px solid;
}
tr:first-child {
border-top: none;
}
/帕特里克
听起来您正在谈论的“第一行”是表格标题-因此,您确实应该考虑使用thead
和tbody
在标记中(单击此处),这将导致“更好”的标记(从字面上看是正确的,对屏幕阅读器等有用) ),以及更轻松,跨浏览器友好的css选择(table thead ... { ... }
)
理想的解决方案,但IE中不支持
tr:not(:first-child) {css}
第二个解决方案是设置所有tr的样式,然后为第一个孩子用css覆盖:
tr {css}
tr:first-child {override css above}
尽管问题已经有了一个不错的答案,但我只想强调一下,: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;
}
也就是说,由于input
s是子级,因此您将放置first-child
在选择器的输入部分。
通过将类添加到第一个tr
或后续的tr
s中。没有单独使用CSS来选择所需行的跨浏览器方法。
但是,如果您不关心Internet Explorer 6、7或8:
tr:not(:first-child) {
color: red;
}
由于
tr:not(:first-child)
IE 6、7、8不支持。您可以使用jQuery的帮助。你可以在这里找到