Html 处理输入字段时CSS同级选择器不一致_Html_Css

Html 处理输入字段时CSS同级选择器不一致

html css

Html 处理输入字段时CSS同级选择器不一致,html,css,Html,Css,我有下面的html/css，它旨在将一个同级元素更改为红色，如果输入元素之前有一个“invalid”类，我的问题是当第一个元素是输入字段时，如何解释同级选择器的行为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style tyle="tex

我有下面的html/css，它旨在将一个同级元素更改为红色，如果输入元素之前有一个“invalid”类，我的问题是当第一个元素是输入字段时，如何解释同级选择器的行为

<!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.required_文本
{
颜色：#008000；
显示：内联；
}
input.invalid+div.required\u文本
{
颜色：80万；
}
必需的
必需的
必需的
请尝试此标记
<div><input type="text" class=""><span class="required_text">Required</span></div>

必需

不应将块元素放入内联元素中
从DTD
<!ELEMENT P - O (%inline;)*            -- paragraph -->



表示段落只能包含0个或多个内联元素，如注释中所述，不能在元素中嵌套元素。规范只是禁止这样做（）。一个开始
标记将隐式关闭前面的开始
标记（如果它在那里），因此第一个标记的DOM结构基本上如下所示：
p
  input
div
p
  input
div
p
  input.invalid
div

p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text

与此相反：
p
  input
  div.required_text
p
  input
  div.required_text
p
  input.invalid
  div.required_text

p
  div
  div.required_text
p
  div
  div.required_text
p
  div.invalid
  div.required_text

第二个标记构建的DOM结构如下所示：
p
  input
div
p
  input
div
p
  input.invalid
div

p
div
div.required_text
p
div
div.required_text
p
div.invalid
div.required_text

与此相反：
p
  input
  div.required_text
p
  input
  div.required_text
p
  input.invalid
  div.required_text

p
  div
  div.required_text
p
  div
  div.required_text
p
  div.invalid
  div.required_text

这使得你所有的
都是他们之前的
的兄弟姐妹，而不是孩子。
这里有一把小提琴，让人们可以看到。注意，在第一个三重唱中，一切都是绿色的，而在第二个三重唱中，最后一个是红色的。我刚刚发现，通过使用输入字段扭曲行，添加了额外的段落标记。显然，你不应该将标记放在标记>>中，这就解释了我的问题。如果你感兴趣，我的答案通过示例解决了你的编辑问题。块元素放在内联元素中的位置在哪里？input
元素是一个空的内联元素，它不能包含任何子元素。我想p只是一个特例