BinaryDevelop
  1. ホーム
  2. css

[解決済み】子要素にCSSスタイルを適用する

2022-04-05 02:58:03

質問

DIV内のテーブルにのみ、特定のクラスでスタイルを適用したい。

注：子要素にはcss-selectorを使いたい。

なぜ、#1がうまくいって#2がうまくいかないのでしょうか？

1: 

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2: 

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTMLです。 

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

何が間違っているのでしょうか？

どうすればいいですか？

このコード " div.test th, td, caption {padding:40px 100px 40px 50px;} は、すべての th 要素に含まれる div という名前のクラスを持つ test に加えて すべて td 要素と すべて caption 要素で構成されます。

これは、"all と同じではありません。 td , th と caption 要素に含まれる div 要素で、クラスが test となります。 これを実現するには、セレクタを変更する必要があります。

' > は、一部の古いブラウザでは完全にサポートされていません (I'm looking at you, Internet Explorer)。 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します