Fichier

Question

si j'ai une balise d'en-tête <h1 class="hc-reform">title</h1>

 h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}
 

et après cela, j'ai un paragraphe <p>stuff here</p>

Comment puis-je dire en utilisant CSS que chaque <p> tag qui suit h1.hc-reform à utiliser: clear:both;

serait-ce:

 h1.hc-reform > p{
     clear:both;
}
 

pour une raison quelconque, cela ne fonctionne pas.

Answer 1

Ceci est appelé le sélecteur de frère adjacent , et il est représenté par un signe plus ...

 h1.hc-reform + p {
  clear:both;
}
 

Note: ceci n'est pas supporté dans IE6 ou plus ancien.

Answer 2

Vous pouvez utiliser le ~ (tilde):

 h1.hc-reform ~ p{
     clear:both;
}
 

http://reference.sitepoint.com/css/generalsiblingselector

Devrait fonctionner dans la plupart des navigateurs, mais IE6:

http://www.quirksmode.org/css/contents.html#CSS3

Bien que selon le premier lien, il est toujours bogue dans les nouvelles versions d'IE. Je passe généralement par ce que dit quirksmode.

Answer 3

no > est un sélecteur d'enfants.

celui que vous voulez est +

alors essayez h1.hc-reform + p

le support du navigateur n'est pas génial

Answer 4

Le > est un sélecteur d'enfants . Donc, si votre HTML ressemble à ceci:

 <h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>
 

... alors c'est ton ticket.

Mais si votre HTML ressemble à ceci:

 <h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>
 

Ensuite, vous voulez le sélecteur adjacent :

 h1.hc-reform + p{
     clear:both;
}
 

Answer 5

Pas exactement. L' h1.hc-reform > p signifie "tout p exactement un niveau en dessous de h1.hc-reform".

Ce que vous voulez est - h1.hc-reform + p. Bien sûr, qui pourrait causer quelques problèmes dans les anciennes versions d'Internet Explorer; si vous voulez faire de la page compatible avec les anciens S, vous serez coincé soit avec l'ajout d'une classe manuellement les paragraphes ou à l'aide de JavaScript (jQuery, par exemple, vous pourriez faire quelque chose comme $('h1.hc-reform').next('p').addClass('first-paragraph')).

Plus d'infos: http://www.w3.org/TR/CSS2/selector.html ou http://css-tricks.com/child-and-sibling-selectors/