0

说我有这个表格：

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

6 回答 6

5

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

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

来自 MDN 的参考

于 2012-09-12T14:07:18.573 回答
2

尝试，

form table tbody tr td:first-child{
   font-family : Arial;
   font-weight: bold;
}
于 2012-09-12T14:08:05.450 回答
1

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

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

不仅您的 css 更易于理解和调试，而且如果您需要覆盖此规则，而无需使用其他规则来获取特定的 uber，它会更简单。

于 2012-09-12T14:14:04.013 回答
0

您可以先分配一个classto 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是不错的选择，但并非所有浏览器版本都支持。

见下表

于 2012-09-12T14:09:23.253 回答
0

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

CSS：

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

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

于 2012-09-12T14:10:14.227 回答
0

在您的CSS中，您必须使用第一个孩子

form table tbody tr td:first-child{
font-family : Arial;
font-weight: bold;
}
于 2012-09-12T14:08:27.107 回答