どのように直接の子供たちだけをスタイルするには？

Question

どのように直接の子供たちだけをスタイルするには？

I'm modifying an old-ish site that was styled with a combination of tables & css. Before anyone says anything, switching to pure CSS isn't an option.

私はこの構造を持っています：

table.grid
  tr
    td
      table
        tr
          td

CSSでは、 .grid td にパディングがあります。

.grid td スタイルが内側のtd（チェーンの一番下のスタイル）に適用されているようです。 .grid td にその特定のテーブル内ののみ td タグのスタイルを設定する方法はありますか？

（私はCSSマスターからは遠いので、間違ったツリーをここで吠えているなら、教えてください）

1

追加された 06 2月 2012 〜で 03:10 著者 Matt Grande

ビュー: 4

源

ro ru fr es pt de hi ar kk uz be tr uk

6 答え

The > character is used to indicate only direct descendants.

.grid > tr > td { /* style me! */ }

潜在的な tbody に関する@ bazmegakapaの問題を解決するために、

.grid > tr > td, .grid > tbody > tr > td { /* no worries */ }

3

追加された 06 2月 2012 〜で 03:12 著者 Rodaine

源

それは最高です！あなたが最初だから私はあなたを答えとして受け入れます！

追加された 06 2月 2012 〜で 03:16, 著者 Matt Grande, 源

@MattGrande一部のブラウザは tbody 要素を挿入するため、すべてのブラウザで機能しない場合があります。

追加された 06 2月 2012 〜で 03:19, 著者 kapa, 源

著者 Marcin · Answer 1 · 2012-02-06T03:13Z

table.grid > tr > td, table.grid > tbody > tr > td should do what you want - a > b specifies that for the selector to apply, b must be a direct descendant of a. You need the second form because many browsers will generate a tbody.

This won't work: .grid tr > td, because the inner table is a descendant of .grid.

著者 Ian Wood · Answer 2 · 2012-02-06T03:12Z

試してください：

table.grid > tr > td

もしあなたが父親と一緒にテーブルに出くわしたら、probsがあるかもしれない。tbody、tfoot

著者 nfechner · Answer 3 · 2012-02-06T03:12Z

You need the > selector. Using table.grid > tr > td would only apply to td elements directly below table.

著者 Kemal Fadillah · Answer 4 · 2012-02-06T03:13Z

You can be more specific by selecting only the tds inside the tr of table.grid

.grid > tr > td

著者 ParPar · Answer 5 · 2012-02-06T03:17Z

次のようにしてみてください：

 table.grid > tr > td

しかし、私はそれが動作するかどうかは分かりません。