将CSS应用于第一个和第一个桌子的最后一个TH

Question

我需要使用jQuery为下表的第一个和最后一个应用样式，写了一些没有触发的脚本..

 <script>$("th:gt(0)").css("border-left", "none");</script>

 <table>
 <tr>
  <th scope="col">one</th>
  <th scope="col">two</th>
  <th scope="col">three</th>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

任何帮助都会很方便。

Answer 1

您可以使用:first-child和:last-child伪选择器：

$("table tr th:first-child, table tr th:last-child").css("border-left", "none");

---

要仅将CSS应用于最后一个TH，您可以使用.last()，就像这样（保持一行）：

$("table tr th:first-child, table tr th:last-child").css("border-left", "none").last().css("border-right", "none");

Answer 2

我从未尝试过 - 但是有一些伪选择器称为第一个孩子和最后一个孩子。你可以用这种方式定位它们。

但是我不确定浏览器支持？

Answer 3

$('th:first, th:last').css("border-left", "none");

这应该可以解决问题。

您也可以使用：

:last-of-type 要么 :last-child

您可以在jQuery选择器中使用这些，或者只使用css，并使用sizzlejs提供跨浏览器。