Ho il seguente html / css che è destinatocambiare un elemento di pari livello in rosso se l'elemento di input precedente ha una classe "non valida", la mia domanda è: cosa spiegherebbe questo comportamento del selettore di pari livello quando il primo elemento è un campo di input?
<!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
Se cambio HTML per utilizzare un div, questo dispositivo di scorrimento va bene
<!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>
EDIT: Ok, quindi sembra che ci siano tag di paragrafo extra che vengono aggiunti all'output di rendering quando ogni riga è racchiusa con tag di paragrafo che interrompono la selezione di pari livello, che cosa causa questo?
risposte:
2 per risposta № 1prova invece questo markup
<div><input type="text" class=""><span class="required_text">Required</span></div>
Non inserire elementi di blocco in elementi incorporati.
dal DTD
<!ELEMENT P - O (%inline;)* -- paragraph -->
afferma che i paragrafi possono contenere solo 0 o più elementi incorporati
1 per risposta № 2
Come menzionato nei commenti, non è possibile nidificare <div> elementi in <p> elementi. Le specifiche lo vietano semplicemente in questo modo (ecco un link). Un'apertura <div> il tag chiuderà implicitamente un'apertura precedente <p> tag se è presente, quindi essenzialmente la struttura DOM per il tuo primo markup è simile alla seguente:
p
input
div
p
input
div
p
input.invalid
div
Piuttosto che questo:
p
input
div.required_text
p
input
div.required_text
p
input.invalid
div.required_text
E la struttura DOM costruita dal tuo secondo markup è simile alla seguente:
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
Piuttosto che questo:
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
Il che rende tutto tuo <div>fratelli del loro precedente <p>s, piuttosto che i bambini.