如何设置<td>表单中包含的表格中第一个元素的样式

Question

假设我有这个表单：

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

由于我没有id，我如何才能在这个表单的第一个表单上添加一个新样式，以下是我目前所拥有的：

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

Answer 1

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

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

MDN 的参考

Answer 2

Try，

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

Answer 3

根据这里的其他答案，我会使用第一个子项，但您不一定需要对css规则的其余部分如此具体。例如，下面的规则就足够了：

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

你的css不仅更容易理解和调试，而且如果你需要的话，覆盖这个规则也会更简单，而不必对其他规则进行超级特定。

Answer 4

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

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

Answer 5

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

CSS：

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

演示：http://jsfiddle.net/SO_AMK/hVChC/

Answer 6

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

<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;
}

伪选择器:first-child是一个不错的选择，但并非所有浏览器版本都支持。

见下表