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

168

特定のクラスを持つDIV内の表にのみスタイルを適用します。子要素にCSSスタイルを適用する

注：子要素には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>

は私が間違って何をしているのですか？

出典

2009-03-10 roman m

245

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

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

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

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

出典

2009-03-10 20:21:27

必要ではありませんdiv.testを3回以上書いていく方法はありますか？ –

@rmいいえ。ルールのネストや 'with'タイプのグループ化はありません – sblundy

説明のためのthanx –

限り、私はこのことを知っている：

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

またはあなたのケースで

でもこの：

div.yourclass table { your style here; }

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

出典

2009-03-10 20:22:08 tunnuz

>selectorは子孫ではなく、直接の子供のみに一致します。

あなたは

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は、それが<div class="test"><th>this</th></div>と一致しますが、<div class="test"><table><th>this</th></table></div>

出典

2009-03-10 20:22:54 Greg

waaaaay morelikely＃2 methinks – annakata

私はあなたが＃1は、おそらく彼が意図するものではない理由を説明するために、この答えを展開するべきだと思います。 – SpoonMeiser

はい、なぜ＃1が動作しないのかを説明してください –

セレクタはIE6用と下の利用できない>、+ということと、[]を忘れないでくださいと一致しないことを意味しており、any <th> which is a **direct** child of <div class="test">言います。

出典

2009-03-10 20:23:29 Erick

div.test td, div.test caption, div.test th

私のために働く。

子セレクタは> IE6では動作しません。

出典

2009-03-10 20:32:18 Traingamer

そして、私はそれを見ていますが、同じ回答がたくさんあります:-) – Traingamer

.test * {padding: 40px 100px 40px 50px;}

出典

2012-05-24 19:23:46

+21

これは、タイトルなので、もしあなたが私のようなGoogleを介してここに来たら、これはあなたが望むものです。 – BFWebAdmin

公正であるために、これらは2009年の意味での答えです。 –

私の検索に答えました... – SoEzPz

ここに私が最近書いたコードがあります。クラス/ 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>

出典

2012-11-26 15:32:59 Mark

CSSは、 '//'のような単一行のコメントを許可しません。 https://stackoverflow.com/questions/4656546/why-dont-we-have-a-comment-in-css –

あなたはすべての子とhtmlタグの指定なしにスタイルを追加したい場合は、それを使用しています。など<a>ようdiv.parent内部

親タグdiv.parent

子タグ、<input>、<label>

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

また重要削除することができ、その

出典

2013-05-02 06:55:15 user1369111

「！important」を追加することは、チャームのように動作します！ – HovyTech

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

答えて

関連する問題