私は意図されている次のhtml / cssを持っています「無効」のクラスを持つ前の入力要素の場合に兄弟要素を赤に変更するには、最初の要素が入力フィールドである場合のこの兄弟セレクターの動作を何が説明するのでしょうか。
<!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
divを使用するようにHTMLを変更した場合、このslectorは問題ありません
<!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>
編集：わかりました。各行が兄弟の選択を壊している段落タグでラップされているときに、レンダリングされた出力に追加の段落タグが追加されているようですが、これは何が原因ですか？
回答：
回答№1は2代わりにこのマークアップを試してください
<div><input type="text" class=""><span class="required_text">Required</span></div>
ブロック要素をインライン要素に配置しないでください。
DTDから
<!ELEMENT P - O (%inline;)* -- paragraph -->
段落には0個以上のインライン要素しか含めることができないと述べています
回答№2の場合は1
コメントで述べたように、あなたは入れ子にすることはできません <div> の要素 <p> 要素。仕様は単にそのようにそれを禁止しています（ここにリンクがあります）。開口部 <div> タグは前の開口部を暗黙的に閉じます <p> タグがある場合はタグを付けるため、基本的に最初のマークアップのDOM構造は次のようになります。
p
input
div
p
input
div
p
input.invalid
div
それよりむしろ：
p
input
div.required_text
p
input
div.required_text
p
input.invalid
div.required_text
また、2番目のマークアップによって構築されたDOM構造は次のようになります。
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
それよりむしろ：
p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text
それはあなたのすべてを作ります <div>それらの前の兄弟 <p>s、子供ではなく。