style d'une div css

Question

S'il y a un div dire

<div class="ref"><contents goes here</div> 

1. Comment spécifier dans le css comme corps du div .Meaning

   <style> 
   .ref body { 
       /* ref body contents goes here*/ 
       } 
   </style> 
   

   Peut quelque chose comme ce qui précède être terminé?

2. Si quelqu'un peut expliquer le dessous aussi

   <style> 
       .a > .bb 
       { 
       } 
   </style> 
   

Qu'est-ce qui précède signifie?

Merci ..

Answer 1

Pour la première, il est pas tout à fait clair ce que vous voulez dire. Tout en utilisant .ref { /* CSS here */ } ciblera cet élément div.Si vous voulez dire l'ajout de contenu via CSS, il est possible en utilisant les :before et :after pseudo slectors:

.ref:after { 
    content: "Some text"; 
} 

Remarque: vous ne pouvez pas mettre HTML là, seul le texte.

---

Pour le second, il recherche tous les éléments avec une classe de bb qui sont des enfants directs de la classe a. Par exemple, il correspondra à la p dans ce code

<div class="a"> 
    <div>something</div> 
    <p class="bb">class bb</p> 
</div> 

Mais il ne correspond pas à ceci:

<div class="a"> 
    <div> 
     <p class="bb">class bb</p> 
    </div> 
</div> 

Answer 2

Pour la première

CSS est seulement pour vous coiffer des éléments et non pour montrer HTML.

Pour la deuxième sur

styles tous les éléments avec un nom de classe 'bb' qui sont des enfants [non descendants] d'éléments avec la classe 'a'. Voir child selector

Ex 1

<div class="a"> 
    <div class="bb"></div> 
</div> 

Ex 2

<div class="a"> 
    <div class="bb"></div> 
    <div> 
     <div class="bb"></div> 
    </div> 
</div> 

sélecteur d'enfant ne sélectionner la première div avec la classe 'bb' et non la div intérieure avec classe 'bb'.

Answer 3

body est un élément HTML spécifique. Pour le style le contenu d'un div avec une classe de ref, votre sélecteur CSS est tout simplement .ref, pas .ref body.

Le > en CSS est appelé le sélecteur d'enfant . Cela signifie que l'élément de droite doit être un élément enfant de celui de gauche. Alors:

.a > .bb correspondrait à la div bb ici:

<div class="a"><div class="bb"></div></div> 

mais pas ici:

<div class="bb"></div>