質問
特定のクラスを持つ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>
何が間違っているのですか?
解決
このコード<!> quot; div.test th, td, caption {padding:40px 100px 40px 50px;}
<!> quot; all th
要素と all に加えて、div
という名前のクラスを持つtest
要素に含まれるすべてのtd
要素にルールを適用しますcaption
要素。
>
<!> quot;のクラスを持つ<=>要素に含まれる<!> quot; all <=>、<=>、および<=>要素とは異なります。そのためには、セレクターを変更する必要があります:
'<=>'は、一部の古いブラウザでは完全にサポートされていません(Internet Explorerを探しています)。
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
他のヒント
.test * {padding: 40px 100px 40px 50px;}
>
セレクタは直接の子のみに一致しますが、子孫ではありません。
欲しい
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 > 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>
すべての子にスタイルを追加し、htmlタグの仕様を追加しない場合は、それを使用します。
親タグdiv.parent
<a>
、<input>
、<label>
などのdiv.parent内の子タグ
code:div.parent * {color: #045123!important;}
また、必須ではない重要なものを削除できます
これは最近書いたコードです。クラス/ 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>
div.test td, div.test caption, div.test th
私のために働く。
子セレクター<!> gt; IE6では動作しません。
これを知っている限り:
div[class=yourclass] table { your style here; }
またはあなたの場合はこれでも:
div.yourclass table { your style here; }
(ただし、これはyourclass
sではないdiv
を持つ要素に対して機能します)は、div[class=yourclass]
内のテーブルのみに影響します。そして、ケンが言うように、<!> gt;どこでもサポートされていません(および<=>もあるため、クラスにはポイント表記を使用してください)。