Javascript 如何设置表格中包含的第一个元素的样式

假设我有这个表格：

<form>
  <table>
    <tbody>
      <tr>
        <td style="font-family : Arial">
          Sample text
        </td>
      </tr>
    </tbody>
  </table>
</form>

如果希望规则仅应用于其父级的第一个子级，请使用第一个子级：

form table tbody tr td:first-child {
    font-family : Arial;
    font-weight: bold;
}

试试看

---

在css中，必须使用第一个子元素

form table tbody tr td:first-child{
font-family : Arial;
font-weight: bold;
}

您可以将一个类分配给第一个td，然后将CSS规则部署到该类

伪选择器：第一个子项是不错的选择，但并非所有浏览器版本都支持

您可以使用CSS第一个子选择器，如下所示：注意直接后代选择器，这将只选择表单中第一个表中每个tr中的第一个td

CSS:

---

演示：

根据这里的其他答案，我会使用first child，但您不必对css规则的其余部分如此具体。例如，以下规则应足够：

form td:first-child {
    font-family: Arial;
    font-weight: bold;
}

---

您的css不仅更容易理解和调试，而且在需要时覆盖此规则也更简单，而不必使用其他规则来获得uber特定的属性。

使用class而不是使用pseudo:first child有什么原因吗？

form table tbody tr td:first-child{
font-family : Arial;
font-weight: bold;
}

<form>
  <table>
    <tbody>
      <tr>
        <td class="firstChild">
          Sample text
        </td>
      </tr>
    </tbody>
  </table>
</form>

form table tbody tr td.firstChild{
    font-family : Arial;
    font-weight: bold;
}

form > table > tbody > tr > td:first-child {
    font-family: Arial;
    font-weight: bold;
}​

form td:first-child {
    font-family: Arial;
    font-weight: bold;
}