152

クラスのスタイルを 1 つのレベルの td タグのみに適用する方法はありますか?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>
4

7 に答える 7

246

クラスのスタイルを 1 つのレベルの td タグのみに適用する方法はありますか?

はい* :

.MyClass>tbody>tr>td { border: solid 1px red; }

しかし！'<code>>' 直接子セレクターは IE6 では機能しません。そのブラウザをサポートする必要がある場合 (おそらくそうするでしょう)、内部要素を個別に選択し、スタイルの設定を解除するだけです。

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

*tbody最初の例は、HTML にない要素を参照していることに注意してください。それはあなたの HTML にあるはずですが、ブラウザーは通常、それを省略しても問題ありません...彼らはそれを舞台裏で追加するだけです。

于 2009-03-05T01:39:32.300 に答える
34

CSSを使用するのはどうですか：first-child pseudo-class：

.MyClass td:first-child { border: solid 1px red; }
于 2009-11-26T08:39:31.507 に答える
8

このスタイル:

table tr td { border: 1px solid red; }
td table tr td { border: none; }

私に与えます：

これ http://img12.imageshack.us/img12/4477/borders.png

ただし、ここではおそらくクラスを使用するのが正しいアプローチです。

于 2009-03-05T01:47:44.043 に答える
6

MyClass 内のテーブルのセレクターを作成するだけです。

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(すべての内部テーブルに一般的に適用するには、 も実行できますtable table td。)

于 2009-03-05T01:48:54.803 に答える
3

うまくいくと思います。

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }
于 2014-03-14T10:30:48.290 に答える
3

テーブルの最初の列の幅を設定したかったのですが、これが機能することがわかりました（FF7で）-最初の列の幅は50pxです：

#MyTable>thead>tr>th:first-child { width:50px;}

私のマークアップの場所

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>
于 2011-10-13T22:57:08.747 に答える
2

私はあなたが試すことができると思います

table tr td { color: red; }
table tr td table tr td { color: black; }

または

body table tr td { color: red; }

ここで、「body」はテーブルの親のセレクターです

しかし、クラスはおそらくここに行く正しい方法です。

于 2009-03-05T01:39:14.500 に答える