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

232

特定のクラスを持つ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>

何が悪いのですか？

css  css-selectors 
— ローマm
ソース
>、+、および[]セレクターは、IE6以下では使用できないことを忘れないでください。
— エリック

回答:

309

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

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

' >'は、一部の古いブラウザー（Internet Explorerで表示しています）では完全にサポートされていません。 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}
— ケンブラウニング
ソース
div.testを3回以上書く方法はありますか？
— roman m
2
@rmいいえ。ルールのネストや「with」タイプのグループ化はありません
— sblundy
2
@romanm「div.test」を3回以上書く方法はあります。CSSファイルの書き込みにsass以下のフレームワークを使用することを検討してください！:)
— gillyb 2014
@romanm-私の回答を参照してください。*を使用してすべての子をターゲットにして繰り返しを防止するか、または.class> *をすべての直接の子に使用します。それは難しいことではありません。
— Richard Edwards
IEでサポートされていないというヒントは非常に役に立ちました。iOSのDTCoreTextでCSSを機能させようとしましたが、機能しませんでした。パーサーはIEよりも劣っています。
— サイレン
123 
.test * {padding: 40px 100px 40px 50px;}
— リチャードエドワーズ
ソース
11
ここで*は.test *、すべての子要素に対して最も具体的なルールになるため、他のより具体的なルールでオーバーライドできないことを意味します。言い換えると、は最も具体的なルールである.test *ためtest *、内部に配置したものは、より具体的なcssルールによって上書きできないことに注意してください。
— vadasambar 2017
81

> セレクタ直接の子だけでなく、子孫に一致します。

あなたが欲しい 

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> */

一方、2番目は言う

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

— グレッグ
ソース
fwiw、そのセレクターのtdとキャプションが「ダム」であるため-div.testに関係なく、指定されたth /キャプションと一致します。この種のブラインドターゲットが、最も一般的なスタイル以外の目的でCSSに必要とされることはめったにありません。
— アナカタ2009年
@annakata：これはcssフレームワークの一部です。ローカルに適用しようとしています
— roman m
10

すべての子にスタイルを追加し、htmlタグの仕様を追加しない場合は、それを使用します。

親タグ div.parent

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

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

重要なものを削除することもできます。

— user1369111
ソース
7

ここに私が最近書いたいくつかのコードがあります。クラス/ 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>
スニペットを展開

— マーク
ソース
CSSでは、などの単一行コメントは許可されていません//。参照してくださいstackoverflow.com/questions/4656546/...
— フォルカー・E.
2

私が知る限りこれ：

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

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

div.yourclass table { your style here; }

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

— トゥヌズ
ソース
0

このコードは、SCSS構文を使用して、トリックも実行できます。

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}
— 集合
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.