270

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

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

4

8 に答える 8

354

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

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

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

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}
于 2009-03-10T20:21:27.850 に答える
141 
.test * {padding: 40px 100px 40px 50px;}
于 2012-05-24T19:23:46.057 に答える
92

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

あなたが欲しい

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>

于 2009-03-10T20:22:54.337 に答える
12

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

親タグdiv.parent

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

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

必須ではない重要なものを削除することもできます

于 2013-05-02T06:55:15.287 に答える
8

ここに私が最近書いたいくつかのコードがあります。クラス/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-26T15:32:59.927 に答える
5 
div.test td, div.test caption, div.test th

私のために働きます。

子セレクター > は IE6 では機能しません。

于 2009-03-10T20:32:18.167 に答える
5

このコードは、SCSS 構文を使用して同様にトリックを行うことができます

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}
于 2020-05-06T04:54:53.800 に答える
3

私がこれを知っている限り：

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

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

div.yourclass table { your style here; }

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

于 2009-03-10T20:22:08.707 に答える