Wenden Sie den CSS-Stil auf untergeordnete Elemente an

232

Ich möchte Stile nur auf die Tabelle innerhalb des DIV mit einer bestimmten Klasse anwenden:

Hinweis: Ich würde lieber einen CSS-Selektor für untergeordnete Elemente verwenden.

Warum funktioniert die Nummer 1 und die Nummer 2 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?

css css-selectors römisch m
quelle
Vergessen Sie nicht, dass die Selektoren>, + und [] für IE6 und darunter nicht verfügbar sind.
Erick

Antworten:

309

Dieser Code " div.test th, td, caption {padding:40px 100px 40px 50px;}" wendet eine Regel auf alle thElemente an, die in einem divElement mit einer benannten Klasse enthalten sind test, zusätzlich zu allen td Elementen und allen caption Elementen.

Es ist nicht die gleiche wie „alle td, thund captionElemente , die sich durch ein enthaltene divElement mit einer Klasse von test“. Um dies zu erreichen, müssen Sie Ihre Selektoren ändern:

' >' wird von einigen älteren Browsern nicht vollständig unterstützt (ich sehe Sie an, Internet Explorer). 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}
Ken Browning
quelle
Gibt es eine Möglichkeit, div.test dreimal zu schreiben?
Roman m
2
@rm Nein. Es gibt keine Verschachtelung von Regeln oder 'mit'
Typgruppierung
2
@romanm Es ist weit herum, 'div.test' dreimal zu schreiben! Schauen Sie sich die Verwendung von Sass oder weniger Frameworks zum Schreiben von CSS-Dateien an! :)
Gillyb
@romanm - siehe meine Antwort: Verwenden Sie ein *, um alle Kinder anzusprechen, um Wiederholungen zu verhindern, oder verwenden Sie .class> * für alle direkten Kinder. Es ist nicht schwer.
Richard Edwards
Der Hinweis, dass im IE nicht unterstützt wird, war sehr hilfreich. Ich habe versucht, CSS für DTCoreText unter iOS zum Laufen zu bringen, aber es hat nicht funktioniert. Der Parser ist schlechter als im IE.
Sirenen
123 
.test * {padding: 40px 100px 40px 50px;}
Richard Edwards
quelle
11
Beachten Sie, dass * hier bedeutet, dass Sie es nicht mit einer anderen spezifischeren Regel überschreiben können, da .test *dies die spezifischste Regel für jedes untergeordnete Element wäre. Mit anderen Worten, denken Sie daran, dass alles, was Sie eingeben, .test *nicht durch eine spezifischere CSS-Regel überschrieben werden kann, da dies test *die spezifischste Regel ist.
Vadasambar
81

Der > Selektor stimmt nur mit direkten Kindern überein, nicht mit Nachkommen.

Sie wollen 

div.test th, td, caption {}

oder wahrscheinlicher

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

Bearbeiten:

Der erste sagt 

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

Während 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 das div.test > thsagt any <th> which is a **direct** child of <div class="test">, was bedeutet , passt auf sie <div class="test"><th>this</th></div>aber nicht überein<div class="test"><table><th>this</th></table></div>

Greg
quelle
fwiw, weil td und caption in diesem Selektor "dumm" sind - sie stimmen mit jeder gegebenen th / caption überein, ohne Rücksicht auf div.test. Diese Art der blinden Ausrichtung ist selten das, was Sie in CSS für etwas anderes als die allgemeinsten Stile wollen.
Annakata
@annakata: das ist ein Teil des CSS-Frameworks, ich versuche es lokal anzuwenden
Roman m
10

Wenn Sie allen untergeordneten Elementen einen Stil hinzufügen möchten und keine Spezifikation für das HTML-Tag angeben möchten, verwenden Sie ihn.

Übergeordnetes Tag div.parent

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

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

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

user1369111
quelle
7

Hier ist ein Code, den ich kürzlich geschrieben habe. Ich denke, dass es eine grundlegende Erklärung für die Kombination von Klassen- / ID-Namen mit Pseudoklassen bietet.

.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>
Erweitern Sie das Snippet

Kennzeichen
quelle
CSS erlaubt keine einzeiligen Kommentare wie //. Siehe stackoverflow.com/questions/4656546/…
Volker E.
4 
div.test td, div.test caption, div.test th

funktioniert bei mir.

Die untergeordnete Auswahl> funktioniert in IE6 nicht.

Traingamer
quelle
2

Soweit ich das weiß:

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

oder in deinem Fall sogar das:

div.yourclass table { your style here; }

(Dies funktioniert jedoch für Elemente yourclass, die möglicherweise nicht divs sind.) wirkt sich nur auf Tabellen im Inneren aus yourclass. Und wie Ken sagt, wird das> nicht überall unterstützt (und div[class=yourclass]auch die Punktnotation für Klassen).

tunnuz
quelle
0

Dieser Code kann den Trick auch mithilfe der SCSS-Syntax ausführen

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}
Greguintow
quelle