Dostałem następujący html / css, który jest przeznaczonyaby zmienić element rodzeństwa na czerwony, jeśli element wejściowy ma klasę „nieprawidłowy”, moje pytanie brzmi: co by wyjaśniało zachowanie selektora rodzeństwa, gdy pierwszy element jest polem wejściowym?
<!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
Jeśli zmienię mój kod HTML, aby użyć div, ten pasek jest w porządku
<!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>
EDYCJA: Ok, więc wydaje się, że do renderowanego wyniku dodawane są dodatkowe znaczniki akapitu, gdy każda linia jest owinięta znacznikami akapitu, która łamie wybór rodzeństwa, co powoduje to?
Odpowiedzi:
2 dla odpowiedzi № 1spróbuj tego znacznika
<div><input type="text" class=""><span class="required_text">Required</span></div>
Nie należy umieszczać elementów blokowych w elementach wbudowanych.
z DTD
<!ELEMENT P - O (%inline;)* -- paragraph -->
mówi, że akapity mogą zawierać tylko 0 lub więcej elementów wbudowanych
1 dla odpowiedzi nr 2
Jak wspomniano w komentarzach, nie możesz się zagnieździć <div> elementy w <p> elementy. Specyfikacja po prostu zabrania tego w ten sposób (oto link). Otwieranie <div> tag niejawnie zamknie poprzednie otwarcie <p> znacznik, jeśli jest, więc zasadniczo struktura DOM dla pierwszego znacznika wygląda tak:
p
input
div
p
input
div
p
input.invalid
div
Zamiast tego:
p
input
div.required_text
p
input
div.required_text
p
input.invalid
div.required_text
A struktura DOM zbudowana przez twój drugi znacznik wygląda tak:
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
Zamiast tego:
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
Co sprawia, że wszyscy jesteście <div>s rodzeństwo z poprzedniego <p>s, a nie dzieci.