css sélecteur pour premier enfant direct seulement

Question

J'ai le html suivant

 <div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>
 

Et le style suivant:

 DIV.section DIV:first-child 
{
  ...
}
 

Pour une raison quelconque, je ne comprends pas que le style soit appliqué au "sous-contenu 1" <div> ainsi qu'à l ' "en-tête" <div> .

Je pensais que le sélecteur sur le style s'appliquerait uniquement au premier enfant direct d'une div avec une classe appelée "section". Comment puis-je changer le sélecteur pour obtenir ce que je veux?

Answer 1

Ce que vous avez posté signifie littéralement "Trouver toutes les divs qui sont à l'intérieur de la section de la vrd et sont le premier enfant de leur parent." La sous-table des matières 1 div correspond à cette description.

Il est clair pour moi si vous voulez les deux enfants de la div principale ou non. Si oui, utilisez ceci:

div.section > div

Si vous souhaitez uniquement l'en-tête, utilisez ceci:

div.section > div:first-child

À l'aide de l' > modifications de la description: "Trouver toutes les divs qui sont les descendants directs de l'article divs", qui est ce que vous voulez.

Veuillez noter que tous les principaux navigateurs prennent en charge cette méthode, sauf IE6. Si l'appui IE6 est critique, vous devrez ajouter des classes à l'enfant divs et de l'utiliser, à la place. Sinon, c'est pas la peine de se soucier.

Answer 2

CSS est appelé Feuilles de Style en Cascade, parce que les règles sont héritées. En utilisant le sélecteur suivant, permettra de sélectionner uniquement les enfants directs de la mère, mais ses règles sera héritée par l' divenfants divs:

div.section > div { color: red }

Maintenant, tant que div et ses enfants seront en red. Vous devez annuler tout ce que vous définissez sur le parent, si vous ne voulez pas qu'il hériter:

div.section > div { color: red }
div.section > div div { color: black }

Maintenant seulement que seul div qui est un enfant direct de l' div.section sera rouge, mais ses enfants divs sera toujours noir.

Answer 3

Utilisation `` .

Mieux encore, utilisez un tag pour le titre et dans votre CSS, afin de soutenir les navigateurs plus anciens (qui ne connaissent pas la `` ) et Gardez votre balisage sémantique.

Answer 4

div.section > div

Answer 5

Si vous avez besoin soutenir IE6 alors cet article peut vous aider à émuler le sélecteur enfant pour IE6 : http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/