style div attribute atributo html css css-selectors siblings

div - title label html



CSS siguiente elemento (5)

El > es un selector de niños . Entonces, si tu HTML se ve así:

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

... entonces ese es tu boleto.

Pero si tu HTML se ve así:

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

Entonces quieres el selector adyacente :

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

si tengo una etiqueta de encabezado <h1 class="hc-reform">title</h1>

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

y después de eso tengo un párrafo <p>stuff here</p>

¿Cómo puedo decir con CSS que cada etiqueta <p> que sigue a la h1.hc-reform utiliza: clear:both;

sera eso:

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

por alguna razón, eso no está funcionando.


Esto se llama el selector de hermanos adyacente , y se representa con un signo más ...

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

Nota: esto no es compatible con IE6 o anterior.


No exactamente. La h1.hc-reform > p significa "cualquier p exactamente un nivel debajo de h1.hc-reform ".

Lo que quiere es h1.hc-reform + p . Por supuesto, eso podría causar algunos problemas en versiones anteriores de Internet Explorer; si desea que la página sea compatible con IE más antiguos, tendrá que agregar una clase manualmente a los párrafos o usar algo de JavaScript (en jQuery, por ejemplo, podría hacer algo como $(''h1.hc-reform'').next(''p'').addClass(''first-paragraph'') ).

Más información: http://www.w3.org/TR/CSS2/selector.html o http://css-tricks.com/child-and-sibling-selectors/


Puede usar el selector de hermanos ~ :

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

Esto selecciona todos los elementos p que vienen después de .hc-reform , no solo el primero.


no > es un selector de elementos secundarios.

el que quieres es +

así que intente h1.hc-reform + p

el soporte del navegador no es genial