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

Reference from the MDN

Answer 2

尝试，

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

您可以将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是不错的选择，但不是所有浏览器版本都支持。

的 See bottom table 的

Answer 6

您可以使用CSS first-child选择器，如下所示:(请注意直接后代选择器，这只会选择表单第一个表中每个td中的第一个tr ）

CSS：

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

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

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

6 个答案: