Appliquez le Style CSS aux éléments enfants

Question

Je veux appliquer les styles uniquement à la table à l’intérieur de la DIV avec une classe particulière :

Remarque : je préfère utiliser un sélecteur css pour les éléments enfants.

Pourquoi les œuvres de #1 et #2 ne fonctionne pas ?

1 :

2 :

HTML :

Ce que je fais mal ?

Answer 1

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

Ce n'est pas la même chose que "tous td, th et caption des éléments qui sont contenus par un div élément à une classe d' test". Pour réaliser que vous avez besoin de changer votre sélecteurs:

'>' n'est pas entièrement pris en charge par certains navigateurs plus anciens (je suis à la recherche à vous, Internet Explorer).

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

Answer 2

<pre><code></code></pre>

Answer 3

L' > sélecteur correspond à diriger les enfants uniquement, 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 est 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">  */

Vos originaux de l' div.test > th , dit - any <th> which is a **direct** child of <div class="test">, ce qui signifie qu'il va correspondre <div class="test"><th>this</th></div> , mais ne pas correspondre <div class="test"><table><th>this</th></table></div>

Answer 4

Si vous souhaitez ajouter le style à tous les enfants et aucune spécification pour la balise html puis l’utiliser.

Balise parente``

balise de l’enfant à l’intérieur de la div.parent comme , , `` etc..

Code :``

Vous pouvez également supprimer important, ce n’est pas nécessaire

Answer 5

N’oubliez pas que le >, + et sélecteurs [] ne sont pas disponibles pour IE6 et moins.