Applica lo stile CSS agli elementi figlio
-
08-07-2019 - |
Domanda
Voglio applicare gli stili solo alla tabella all'interno del DIV con una classe particolare:
Nota: preferirei utilizzare un selettore css per 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>
Cosa sto sbagliando?
Soluzione
Questo codice " div.test th, td, caption {padding:40px 100px 40px 50px;}
" applica una regola a tutti gli th
elementi contenuti in un div
elemento con una classe denominata test
, oltre a tutti td
elementi e tutti caption
elementi.
Non è lo stesso di " tutti gli elementi >
, <=> e <=> contenuti in un elemento <=> con una classe di <=> " ;. Per realizzare ciò è necessario modificare i selettori:
'<=>' non è completamente 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;
}
Altri suggerimenti
.test * {padding: 40px 100px 40px 50px;}
Il >
selettore corrisponde solo ai bambini diretti, non discendenti.
Tu vuoi
div.test th, td, caption {}
o più probabile
div.test th, div.test td, div.test caption {}
Modifica:
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 > th
dice any <th> which is a **direct** child of <div class="test">
, il che significa che corrisponderà a <div class="test"><th>this</th></div>
ma non corrisponderà a <div class="test"><table><th>this</th></table></div>
Se vuoi aggiungere uno stile in tutto il figlio e nessuna specifica per il tag html, allora usalo.
Tag principale div.parent
tag figlio all'interno del div.parent come <a>
, <input>
, <label>
ecc.
codice: div.parent * {color: #045123!important;}
Puoi anche rimuovere importanti, non è richiesto
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>
div.test td, div.test caption, div.test th
funziona per me.
Il selettore figlio > non funziona in IE6.
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à con elementi con yourclass
che potrebbero non essere div
s) influenzerà solo le tabelle all'interno di div[class=yourclass]
. E, come dice Ken, il & Gt; non è supportato ovunque (e anche <=>, quindi usa la notazione puntuale per le classi).