zu CSS Stil anwenden, Kind Elementen

168

Ich mag nur innerhalb des DIV mit einer bestimmten Klasse an die Tabellenstile anwenden:zu CSS Stil anwenden, Kind Elementen

Hinweis: ich eher einen CSS-Selektor für Kinder Elemente verwenden würde.

Warum funktioniert die # 1 und # 2 nicht?

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

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?

Quelle

2009-03-10 roman m

245

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

Es ist nicht dasselbe wie „alle td, thcaption und Elemente, die von einem div Elemente mit einer Klasse von test enthalten sind“. Um dies zu erreichen, müssen Sie Ihre Selektoren ändern:

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

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

Quelle

2009-03-10 20:21:27

erforderlich ist gibt es einen Weg um div.test dreimal zu schreiben? –

@rm Nein. Es gibt keine Verschachtelung von Regeln oder 'mit' Typ Gruppierung – sblundy

Dank für die Klarstellung –

Soweit ich dies wissen:

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

oder in Ihrem Fall auch diese:

div.yourclass table { your style here; }

(aber dies wird für Elemente mit yourclass arbeiten, die nicht div s sein könnte) betrifft nur Tabellen innerhalb yourclass. Und, wie Ken sagt, das> wird nicht überall unterstützt (und auch div[class=yourclass], also verwende die Punktnotation für Klassen).

Quelle

2009-03-10 20:22:08 tunnuz

Die >selector stimmt nur direkte Kinder, keine Nachkommen.

Sie wollen

div.test th, td, caption {}

oder eher

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 Ihrem ursprünglichen die 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> entsprechen wird, aber passen nicht <div class="test"><table><th>this</th></table></div>

Quelle

2009-03-10 20:22:54 Greg

Waaaaay morelikely # 2 michinks – annakata

Ich denke, Sie sollten diese Antwort zu erklären, warum # 1 ist wahrscheinlich nicht das, was er beabsichtigt. – SpoonMeiser

ja, bitte erklären Sie, warum # 1 nicht funktioniert –

Vergessen Sie nicht, dass die>, + und [] Selektoren sind für IE6 nicht verfügbar und unter.

Quelle

2009-03-10 20:23:29 Erick

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

funktioniert für mich.

Der untergeordnete Selektor> funktioniert nicht in IE6.

Quelle

2009-03-10 20:32:18 Traingamer

Und (während ich das suche) hast du viele der gleichen Antwort :-) – Traingamer

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

Quelle

2012-05-24 19:23:46

+21

Dies ist die Antwort auf die Frage in der Titel, also, wenn Sie hier über Google (wie ich) enden, ist dies das, was Sie wollen. – BFWebAdmin

Um fair zu sein, sind diese Antworten, die im Jahr 2009 Sinn gemacht. –

Beantwortete meine Suche ... – SoEzPz

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

.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>

Quelle

2012-11-26 15:32:59 Mark

CSS erlaubt keine einzeiligen Kommentare wie '//'. Siehe https://stackoverflow.com/questions/4656546/why-dont-we-have-a-comment-in-css –

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

Geordnetes Tag div.parent

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

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

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

Quelle

2013-05-02 06:55:15 user1369111

Hinzufügen der '! Wichtige' funktioniert wie ein Charme !!! – HovyTech

zu CSS Stil anwenden, Kind Elementen

Antwort

Verwandte Themen