javascript - 仅将 CSS 规则应用于不分配类/ID 的第一个？

Question

我已经看过了，这不是我需要的..

我需要类似的东西

table.mytable tr first-td's { border: 1px solid black; }

为了

<table class="mytable">
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
<tr>
<td>This has the border</td>
<td>no border</td>
<td>no border</td>
</tr>
</table>

如果这是不可能的，请告诉我，我会很难过。

如果需要完成工作，Javascript/jQuery 是可以接受的。

Answer 1

table.mytable tr td:first-child { border: 1px solid black; }

https://developer.mozilla.org/en-US/docs/CSS/:first-child

也适用于 jQuery ( http://api.jquery.com/first-child-selector/ )：

$('table.mytable tr td:first-child')

Answer 2

是的。这是可能的：

在你的 CSS 中使用

.mytable tr td:first-child  { border: 1px solid black; }​

在这里试试

Answer 3

不是 100% 跨浏览器，但支持就足够了。见http://caniuse.com/#search=:first-child

table.mytable tr td:first-child

Answer 4

您可以使用:first-of-type，但在旧版浏览器上不可用：http: //jsfiddle.net/R9qE3/。

您还可以通过 jQuery 选择正确的元素（用于跨浏览器支持），但您需要在添加tds 或移动它们时更新状态。

Answer 5

table.mytable tr:first-child {
    border: 1px solid black;
}

Answer 6

你可以使用 jQuery “nth child” http://api.jquery.com/nth-child-selector/

它会是这样的：

$("table.mytable tr::nth-child(1)")  //do w/e you need to do here.