Appliquer le style CSS aux éléments de l'enfant

168

Je veux appliquer des styles uniquement à la table à l'intérieur de la DIV avec une classe particulière:Appliquer le style CSS aux éléments de l'enfant

Note: Je préfère utiliser un sélecteur pour css éléments enfants.

Pourquoi le # 1 fonctionne-t-il et le # 2 ne fonctionne-t-il pas?

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>

Qu'est-ce que je fais mal?

Source

2009-03-10 roman m

245

Ce code « div.test th, td, caption {padding:40px 100px 40px 50px;} » applique une règle à tous les éléments th qui sont contenus par un élément div avec une classe nommée test, en plus de tous les td éléments et touscaption éléments.

Il n'est pas la même chose que « tous les td, th et caption éléments qui sont contenus par un élément div avec une classe de test ». Pour ce faire, vous devez changer vos sélecteurs:

'>' n'est pas entièrement 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; 
}

Source

2009-03-10 20:21:27

est Y at-il moyen d'écrire div.test 3 fois? –

@rm Non. Il n'y a pas d'imbrication de règles ou de regroupement de types 'avec' – sblundy

merci pour la clarification –

Pour autant que je sais:

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

ou dans votre cas, même ceci:

div.yourclass table { your style here; }

(mais cela fonctionnera pour les éléments avec yourclass qui pourraient ne pas être div s) affectera uniquement les tables à l'intérieur yourclass. Et, comme Ken le dit, le> n'est pas supporté partout (et div[class=yourclass] aussi, donc utilisez la notation par points pour les classes).

Source

2009-03-10 20:22:08 tunnuz

Le >selector correspond uniquement aux enfants et non aux descendants.

Vous voulez

div.test th, td, caption {}

ou plus probablement

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

Edit:

Le premier dit

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

Alors que le second dit

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

Dans votre original le div.test > th dit any <th> which is a **direct** child of <div class="test">, ce qui signifie qu'il correspondra <div class="test"><th>this</th></div> mais ne correspond pas à <div class="test"><table><th>this</th></table></div>

Source

2009-03-10 20:22:54 Greg

waaaaay morelikely # 2 methinks – annakata

Je pense que vous devriez développer cette réponse pour expliquer pourquoi # 1 n'est probablement pas ce qu'il a l'intention de faire. – SpoonMeiser

oui, s'il vous plaît expliquer pourquoi # 1 ne fonctionne pas –

Ne pas oublier que la>, + et [] sélecteurs ne sont pas disponibles pour IE6 et moins.

Source

2009-03-10 20:23:29 Erick

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

fonctionne pour moi.

Le sélecteur d'enfants> ne fonctionne pas dans IE6.

Source

2009-03-10 20:32:18 Traingamer

Et (pendant que je regarde ça) vous avez beaucoup de la même réponse :-) – Traingamer

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

Source

2012-05-24 19:23:46

+21

Ceci est la réponse à la question posée en le titre, donc si vous vous retrouvez ici via Google (comme moi) c'est celui que vous voulez. – BFWebAdmin

Pour être honnête, ce sont des réponses qui ont du sens en 2009. –

Répondu à ma recherche ... – SoEzPz

Voici un code que j'ai récemment écrit. Je pense qu'il fournit une explication de base de la combinaison de noms de classe/ID avec des pseudo-classes.

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

Source

2012-11-26 15:32:59 Mark

CSS n'autorise pas les commentaires sur une seule ligne tels que '//'. Voir https://stackoverflow.com/questions/4656546/why-dont-we-have-a-comment-in-css –

Si vous voulez ajouter du style à tous les enfants et aucune spécification pour la balise html, utilisez-le.

tag Parent div.parent

balise enfant à l'intérieur du div.parent comme <a>, <input>, <label> etc.

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

Vous pouvez également supprimer importante, ce ne est pas nécessaire

Source

2013-05-02 06:55:15 user1369111

Ajouter le '! Important' fonctionne comme un charme !!! – HovyTech

Appliquer le style CSS aux éléments de l'enfant

Répondre

Questions connexes