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の理解とデバッグが容易になるだけでなく、他のルールに固有のものにする必要がなく、必要に応じてこのルールをオーバーライドするのも簡単になります。

于 2012-09-12T14:14:04.013 に答える
0

あなたのCSSでは最初の子を使わなければなりません

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

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は適切な選択ですが、すべてのブラウザーバージョンでサポートされているわけではありません。

下の表を参照してください

于 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 に答える