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

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

6 答え

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.

4
追加された
一部のブラウザでは無効なHTMLを修正する tbody 要素が挿入されます。
追加された 著者 kapa,

試してください:

table.grid > tr > td

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

3
追加された

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
追加された
それは最高です!あなたが最初だから私はあなたを答えとして受け入れます!
追加された 著者 Matt Grande,
@MattGrande一部のブラウザは tbody 要素を挿入するため、すべてのブラウザで機能しない場合があります。
追加された 著者 kapa,

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

1
追加された

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

.grid > tr > td
1
追加された

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

 table.grid > tr > td

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

1
追加された