Bewerben CSS Style Kind-Elemente

StackOverflow https://stackoverflow.com/questions/632100

  •  08-07-2019
  •  | 
  •  

Frage

Ich mag nur innerhalb des DIV mit einer bestimmten Klasse an die Tabellenstile anwenden:

. Hinweis: Ich würde eher eine CSS-Selektor für Kinder Elemente verwenden

Warum wird die # 1 und # 2 funktioniert nicht?

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>

Was mache ich falsch?

War es hilfreich?

Lösung

Dieser Code "div.test th, td, caption {padding:40px 100px 40px 50px;}" gilt eine Regel für alle th Elemente, die mit einer Klasse mit dem Namen div von einem test Elemente enthalten sind, zusätzlich zu alle td Elemente und alle caption Elemente.

Es ist nicht die gleiche wie „alle td, th und caption Elemente, die von einem div Elemente mit einer Klasse von test enthalten sind“. Um das zu erreichen, dass Sie Ihre Wähler ändern müssen:

‚>‘ ist nicht vollständig von einigen älteren Browsern unterstützt (ich suche dich an, Internet Explorer). 

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

Andere Tipps

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

Die > Wähler Direkt Kinder passt, nicht Abkömmlinge .

Sie möchten 

div.test th, td, caption {}

oder wahrscheinlicher 

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

Edit:

Der erste sagt 

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

Der zweite sagt 

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

In Original der div.test > th sagt any <th> which is a **direct** child of <div class="test">, was bedeutet, es <div class="test"><th>this</th></div> passen wird, aber <div class="test"><table><th>this</th></table></div> nicht überein

Wenn Sie Stil in jedem Kind und keine Spezifikation für HTML-Tag hinzufügen möchten, dann benutze ihn.

Übergeordnetes Tag div.parent

Kind-Tag in der div.parent wie <a>, <input>, <label> etc.

Code: div.parent * {color: #045123!important;}

Sie können auch entfernen wichtig, es ist nicht erforderlich

Hier ist ein Code, den ich vor kurzem schrieb. Ich denke, dass es eine grundlegende Erklärung der Kombination von Klasse / ID-Namen mit Pseudoklassen zur Verfügung stellt. 

.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

funktioniert für mich.

Das Kind Selektor> funktioniert nicht in IE6.

Soweit ich weiß, das ist: 

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

oder in Ihrem Fall sogar so aus: 

div.yourclass table { your style here; }

(aber dies wird für Elemente mit yourclass arbeiten, die nicht divs sein könnten) nur Tabellen in yourclass beeinflussen. Und wie Ken sagt, die> nicht überall unterstützt (und div[class=yourclass] auch so verwenden, um die Punkt-Notation für Klassen).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top