Question

我有以下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

如果我改变我的HTML以使用div，这个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>

编辑：好的，所以当每一行用段落标签包装时，似乎有多余的段落标签被添加到渲染的输出中，这段标签打破了兄弟选择，是什么导致这个？

Answer 1

尝试使用此标记

<div><input type="text" class=""><span class="required_text">Required</span></div>

~~您不应将块元素放入内联元素。~~

来自DTD的

<!ELEMENT P - O (%inline;)*            -- paragraph -->

表示段落只能包含0个或更多内联元素

Answer 2

如评论中所述，您无法在<div>元素中嵌套<p>个元素。规范只是禁止它（here's a link）。如果存在，则开始<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

由第二个标记构建的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>兄弟姐妹成为他们之前的{{1}}，而不是孩子。

处理输入字段时CSS Sibling Selector不一致

2 个答案: