orange
green
red
blue
Je veux appliquer des styles uniquement à la table à l’intérieur du DIV avec une classe particulière:
Note: Je préfère utiliser un sélecteur CSS pour les éléments enfants.
Pourquoi le n ° 1 fonctionne-t-il et que le n ° 2 ne fonctionne pas?
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:
div.test > th, td, caption {padding:40px 100px 40px 50px;} some data here
some data here
Qu’est-ce que je fais mal?
Ce code ” div.test th, td, caption {padding:40px 100px 40px 50px;}
” applique une règle à tous les éléments contenus dans un élément div
avec une classe nommée test
, en plus de tous les éléments td
et de toutes les caption
éléments.
Ce n’est pas la même chose que “tous les éléments td
, th
et caption
contenus dans un élément div
avec une classe de test
“. Pour ce faire, vous devez modifier vos sélecteurs:
‘ >
‘ n’est pas totalement supporté par certains navigateurs plus anciens (je vous regarde, Internet Explorer).
div.test th, div.test td, div.test caption { padding: 40px 100px 40px 50px; }
.test * {padding: 40px 100px 40px 50px;}
Le sélecteur >
correspond uniquement aux enfants directs, pas aux descendants.
Tu veux
div.test th, td, caption {}
ou plus probable
div.test th, div.test td, div.test caption {}
Modifier:
Le premier dit
div.test th, /* any underneath a */ td, /* or any anywhere at all */ caption /* or any */
Alors que le second dit
div.test th, /* any underneath a */ div.test td, /* or any underneath a */ div.test caption /* or any underneath a */
Dans votre original, le div.test > th
dit any
, ce qui signifie qu’il correspondra à
mais ne correspondra pas à
this |
---|
Si vous souhaitez append du style à tous les enfants et qu’aucune spécification pour la balise html ne soit utilisée, utilisez-la.
div.parent
parent div.parent
balise enfant à l’intérieur du div.parent comme ,
,
etc.
code: div.parent * {color: #045123!important;}
Vous pouvez également supprimer important, son pas nécessaire
Voici un code que j’ai écrit récemment. Je pense qu’il fournit une explication de base de la combinaison des noms de classe / ID avec des pseudoclasses.
.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; }
Class practice orange
green
red
blue
div.test td, div.test caption, div.test th
travaille pour moi.
Le sélecteur enfant> ne fonctionne pas dans IE6.
Pour autant que je sache ceci:
div[class=yourclass] table { your style here; }
ou même dans votre cas:
div.yourclass table { your style here; }
(mais cela fonctionnera pour les éléments avec votre yourclass
qui pourraient ne pas être div
s) affectera uniquement les tables dans votre yourclass
. Et, comme dit Ken, le> n’est pas supporté partout (et div[class=yourclass]
aussi, donc utilisez la notation de point pour les classes).