Applica lo stile CSS agli elementi figlio

232

Voglio applicare gli stili solo alla tabella all'interno del DIV con una classe particolare:

Nota: preferirei usare un selettore CSS per gli elementi figlio.

Perché il n. 1 funziona e il n. 2 no?

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>

Che cosa sto facendo di sbagliato?

css css-selectors

— romano m
fonte

Non dimenticare che i selettori>, + e [] non sono disponibili per IE6 e versioni precedenti.

— Erick,

309

Questo codice " div.test th, td, caption {padding:40px 100px 40px 50px;}" applica una regola a tutti gli thelementi contenuti in un divelemento con una classe denominata test, oltre a tutti gli td elementi e tutti gli caption elementi.

Non è lo stesso di "all td, thed captionelementi che sono contenuti da un divelemento con una classe di test". Per ottenere ciò è necessario modificare i selettori:

' >' non è pienamente supportato da alcuni browser meno recenti (ti sto guardando, Internet Explorer).

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

— Ken Browning
fonte

c'è un modo per aggirare la scrittura di div.test 3 volte?

— roman m.

2

@rm Nope. Non c'è nidificazione di regole o raggruppamenti di tipo "con"

— sblundy

2

@romanm C'è modo di scrivere "div.test" 3 volte! guarda usando sass o meno framework per scrivere file CSS! :)

— gillyb

@romanm - vedi la mia risposta, usando un * per indirizzare tutti i bambini per evitare che si ripeta, o usando .class> * per tutti i bambini diretti. Non è difficile.

— Richard Edwards,

Il suggerimento di non essere supportato in IE è stato molto utile, stavo cercando di far funzionare alcuni CSS per DTCoreText su iOS ma non funzionava, il loro parser è peggio di IE.

— Sirene,

123

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

— Richard Edwards
fonte

11

Notare che, * qui significa che non è possibile sovrascriverlo con qualsiasi altra regola più specifica poiché .test *sarebbe la regola più specifica per ogni elemento figlio. In altre parole, tieni presente che qualsiasi cosa tu abbia inserito all'interno .test *non può essere sovrascritta da alcuna regola CSS più specifica perché test *è la regola più specifica.

— Vadasambar,

81

Il > selettore corrisponde solo ai bambini diretti, non ai discendenti.

Tu vuoi

div.test th, td, caption {}

o più probabilmente

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

Modificare:

Il primo dice

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

Mentre il secondo dice

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

Nel tuo originale div.test > thdice any <th> which is a **direct** child of <div class="test">, il che significa che corrisponderà <div class="test"><th>this</th></div>ma non corrisponderà<div class="test"><table><th>this</th></table></div>

— Greg
fonte

prima di tutto, perché la td e la didascalia in quel selettore sono "stupide" - corrisponderanno a qualsiasi dato th / didascalia senza riguardo per div.test. Quel tipo di targeting cieco è raramente quello che vuoi nei CSS per tutto tranne che per gli stili più generali.

— annakata,

@annakata: fa parte del framework css, sto provando ad applicarlo localmente

— roman m

10

Se vuoi aggiungere uno stile in tutto il figlio e nessuna specifica per il tag html, allora usalo.

Tag principale div.parent

tag secondario all'interno del div.parent come <a>, <input>, <label>etc.

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

È inoltre possibile rimuovere importanti, non è richiesto

— user1369111
fonte

7

Ecco un po 'di codice che ho scritto di recente. Penso che fornisca una spiegazione di base della combinazione di nomi di classe / ID con pseudoclass.

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

Espandi frammento

— marchio
fonte

CSS non consente commenti a riga singola come //. Vedi stackoverflow.com/questions/4656546/…

— Volker E.

4

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

per me va bene.

Il selettore figlio> non funziona in IE6.

— Traingamer
fonte

2

Per quanto ne so questo:

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

o nel tuo caso anche questo:

div.yourclass table { your style here; }

(ma questo funzionerà per elementi yourclassche potrebbero non essere div) influenzerà solo le tabelle all'interno yourclass. E, come dice Ken, il> non è supportato ovunque (e div[class=yourclass]anche, quindi usa la notazione puntuale per le classi).

— tunnuz
fonte

0

Anche questo codice può fare il trucco, usando la sintassi SCSS

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

— greguintow
fonte