如何使用CSS选择表格中除第一个tr
元素之外的所有tr
元素?
我尝试使用这个方法,但发现它不起作用。
如何使用CSS选择表格中除第一个tr
元素之外的所有tr
元素?
我尝试使用这个方法,但发现它不起作用。
通过将类添加到第一个tr
或后续的tr
中,可以实现选定所需行的效果。但是,仅使用CSS无法跨浏览器选择所需的行。
然而,如果您不关心Internet Explorer 6、7或8:
tr:not(:first-child) {
color: red;
}
tr:not(:first-of-type)
也可能是一个解决方案。 - Joshua Burnscss_selector_here:nth-child(n + 2) { /* properties */}
选择所有选择器的 DOM 元素,但不包括其父元素的第一个子元素。换句话说,它会影响多个父节点中的子节点,而不仅仅是一个。 - Alan Wells我很惊讶没有人提到兄弟组合器的使用,它支持IE7及更高版本:
tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */
它们在 HTML 表格的上下文中以完全相同的方式工作:
tr:not(:first-child)
elem + elem
是一个很好的通用解决方案,适用于你想要定位的元素不是唯一子元素的情况。例如,如果一个 <h2>
后面跟着几个 <p>
标签,那么第一个 <p>
在这种情况下就不是第一个子元素了。 - DisgruntledGoat理想方案,但不受IE支持
tr:not(:first-child) {css}
第二种解决方案是为所有的tr添加样式,然后使用css来覆盖第一个子元素的样式:
tr {css}
tr:first-child {override css above}
另一种选择:
tr:nth-child(n + 2) {
/* properties */
}
听起来你提到的“第一行”应该是你的表头 - 因此你真的应该考虑在你的标记中使用thead
和tbody
(请点击这里),这将产生“更好”的标记(语义正确,对于像屏幕阅读器这样的东西很有用),并且更容易、跨浏览器友好地进行CSS选择(table thead ... { ... }
)。
: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;
}
first-child
。抱歉,我知道这是老问题,但为什么不将所有tr元素样式设置为所需样式,除了第一个元素,然后使用伪类:first-child来撤销所有tr元素指定的样式。
通过以下示例更好地描述:
tr {
border-top: 1px solid;
}
tr:first-child {
border-top: none;
}
/帕特里克
你也可以在CSS中使用伪类选择器,像这样:
.desc:not(:first-child) {
display: none;
}
这不会将类应用于具有类.desc的第一个元素。
这里有一个带有示例的JSFiddle:http://jsfiddle.net/YYTFT/,这是一个很好的来源来解释伪类选择器:http://css-tricks.com/pseudo-class-selectors/
first-child
会忽略类。 - Fez Vrasta<tr class="unselected">
然后在你的CSS中加入以下代码(以text-align命令为例):
unselected {
text-align:center;
}
selected {
text-align:right;
}