web-dev-qa-db-ja.com

子要素にCSSスタイルを適用する

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

注：子要素にはCSSセレクタを使用したいと思います。

＃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>

何がおかしいのですか？

csscss-selectors
202
roman m

このコード "div.test th, td, caption {padding:40px 100px 40px 50px;}"は、allth要素に加えて、divというクラスのtest要素に含まれるすべてのtd要素に規則を適用します。 すべてのcaption要素。

これは、「クラスがtdのth要素に含まれるすべてのcaption、div、およびtest要素」と同じではありません。そのためには、セレクタを変更する必要があります。

'>'は一部の古いブラウザでは完全にはサポートされていません（私はあなたを見ています、Internet Explorer）。

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}
284
Ken Browning
.test * {padding: 40px 100px 40px 50px;}
106
Richard Edwards

>セレクタ は直接の子のみに一致し、子孫には一致しません。

欲しい

div.test th, td, caption {}

もっとありそうな

div.test th, div.test td, div.test caption {}

編集する

最初の人は言う

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

第二が言うのに対し

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

あなたのオリジナルではdiv.test > thはany <th> which is a **direct** child of <div class="test">と言っています、これはそれが<div class="test"><th>this</th></div>と一致するが<div class="test"><table><th>this</th></table></div>と一致しないことを意味します

75
Greg

すべての子にスタイルを追加し、HTMLタグの指定をしたくない場合は、それを使用します。

親タグdiv.parent

div.parent内の子タグ。<a>、<input>、<label>など。

コード：div.parent * {color: #045123!important;}

あなたはまた、重要な、それは必須ではない削除することができます

10
user1369111

これが私が最近書いたコードです。私はそれがクラス/ ID名と擬似クラスを組み合わせることの基本的な説明を提供すると思います。

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}
<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>
5
Mark
div.test td, div.test caption, div.test th

私のために働きます。

子セレクタ>は、IE 6では機能しません。

4
Traingamer

私の知る限りでは：

div[class=yourclass] table {  your style here; }

またはあなたの場合はこれでさえ：

div.yourclass table { your style here; }

（ただし、これは、yourclassではない可能性があるdivを持つ要素には有効です）、yourclass内のテーブルにのみ影響します。そして、Kenが言っているように、>はどこでもサポートされているわけではありません（そしてdiv[class=yourclass]もそうですので、クラスにはポイント表記を使用してください）。

2
tunnuz