Tengo el siguiente html / css que está destinadocambiar un elemento hermano a rojo si el elemento de entrada anterior tiene una clase de "no válido". Mi pregunta es ¿qué explicaría este comportamiento del selector de hermanos cuando el primer elemento es un campo de entrada?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style tyle="text/css">
div.required_text
{
color:#008000;
display:inline;
}
input.invalid + div.required_text
{
color:#800000;
}
</style>
</head>
<body>
<p><input type="text" class=""><div class="required_text">Required</div></p>
<p><input type="text" class=""><div class="required_text">Required</div></p>
<p><input type="text" class="invalid"><div class="required_text">Required</div></p>
</body>
</html
Si cambio mi HTML para usar un div, este slector está bien
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style tyle="text/css">
div.required_text
{
color:#008000;
display:inline;
}
div.invalid + div.required_text
{
color:#800000;
}
</style>
</head>
<body>
<p><div class="">[mock form element]</div><div class="required_text">Required</div></p>
<p><div class="">[mock form element]</div><div class="required_text">Required</div></p>
<p><div class="invalid">[mock form element]</div><div class="required_text">Required</div></p>
</body>
</html>
EDITAR: Ok, entonces parece que hay etiquetas de párrafo adicionales que se agregan a la salida representada cuando cada línea está envuelta con etiquetas de párrafo que está rompiendo la selección de hermanos, ¿qué causa esto?
Respuestas
2 para la respuesta № 1prueba este marcado
<div><input type="text" class=""><span class="required_text">Required</span></div>
No debe colocar elementos de bloque en elementos en línea.
de la DTD
<!ELEMENT P - O (%inline;)* -- paragraph -->
dice que los párrafos solo pueden contener 0 o más elementos en línea
1 para la respuesta № 2
Como se menciona en los comentarios, no se puede anidar <div> elementos en <p> elementos. La especificación simplemente lo prohíbe de esa manera (aqui hay un enlace) Una abertura <div> la etiqueta cerrará implícitamente una apertura anterior <p> etiqueta si está allí, así que esencialmente la estructura DOM para tu primer marcado se ve así:
p
input
div
p
input
div
p
input.invalid
div
En vez de esto:
p
input
div.required_text
p
input
div.required_text
p
input.invalid
div.required_text
Y la estructura DOM construida por su segundo marcado se ve así:
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
En vez de esto:
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
Lo que hace que todo tu <div>s hermanos de sus precedentes <p>s, en lugar de niños.