CSS elemento successivo

Question

se ho un tag di intestazione <h1 class="hc-reform">title</h1>

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

e dopo che ho un paragrafo <p>stuff here</p>

Come posso dire usando i CSS che ogni <p> tag che segue il h1.hc-reform da utilizzare: clear:both;

vorrei che essere:

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

per qualche motivo che non funziona.

Answer 1

questo è chiamato il selettore adjacent sibling, ed è rappresentato da un segno più ...

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

Nota: questo non è supportato in IE6 o più anziani.

Answer 2

no > è un selettore di figlio.

quello che si desidera è +

quindi cercate h1.hc-reform + p

supporto del browser non è grande

Answer 3

Il > è un child selector. Quindi se il tuo codice HTML è il seguente:

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

... allora questo è il tuo biglietto.

Ma se il codice HTML simile a questo:

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

Poi si desidera che il adjacent selector:

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

Answer 4

È possibile utilizzare il sibling selector~:

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

Questo seleziona tutti gli p elementi che arrivano a fter .hc-reform, non solo il primo.

Answer 5

Non esattamente. Il h1.hc-reform > p significa "qualsiasi p esattamente un livello al di sotto di h1.hc-reform".

Quello che vuoi è h1.hc-reform + p. Ovviamente, ciò potrebbe causare alcuni problemi nelle versioni precedenti di Internet Explorer; se vuoi rendere la pagina compatibile con gli IE più vecchi, rimarrai bloccato con l'aggiunta di una classe manualmente ai paragrafi o utilizzando JavaScript (in jQuery, ad esempio, potresti fare qualcosa come $('h1.hc-reform').next('p').addClass('first-paragraph')).

Maggiori informazioni: http://www.w3.org/TR/CSS2/selector.html o http://css-tricks.com/child-and-sibling-selectors/