CSS pseudo-class :required 不能与伪元素一起工作 ::before

Question

我的目的是在必填字段的标签上加上 *。

我正在使用 Chrome 47、Firefox 43 和 Opera 34 进行测试。 None这些可以看懂CSS选择器

span:required::before

按照http://caniuse.com/#feat=form-validation大家应该都能看懂，如果用

span:hover::before

相反，它确实有效。我做错了什么？这是我的代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      span::before {
        content: "[=14=]A0";
      }
      span:required::before { /* This does NOT work! */
        content: "*";
      }
      span:hover::before { /* But this DOES work! */
        content: "_";
      }
    </style>
  </head>
  
  <body>
    <form>
      <p>
        <span required>Name</span>
        <input id="name" type="text" />
      </p>
      
      <p>
        <span>Date of Birth</span>
        <input id="birth" type="text" />
      </p>
    </form>
    
  </body>
</html>

Answer 1

两个问题：

表单标签有一个专用元素，label。你应该使用那个，而不是 span.
required属性只适用于控件本身，即input、select、textarea等。 11=] 只是纯文本（标签本身 基本上是 ）并且 required 属性对这样的元素没有意义。¹

如果您尝试为所需输入的标签设置样式，则需要改为给它一个 class 名称。

这与 :required::before 无关，但是，考虑到大多数表单元素都是替换元素，您不太可能会同时发现伪 class 和那个伪元素。

¹ _{contenteditable 尽管如此。}

Answer 2

required属性必须在表单控件中，并且应该使用labels而不是spans。

然后，您可以使用选择器:required + label::before。要使其工作，表单控件必须按 DOM 顺序出现在标签之前，但随后您可以使用浮动或 flexbox 重新排列。

p {
  overflow: hidden;
}
label {
  float: left;
}
label::before {
  content: "[=10=]A0";
  font-family: monospace;
}
:required + label::before {
  content: "*";
}

<form>
  <p>
    <input id="name" type="text" required />
    <label for="name">Name</label>
  </p>
  <p>
    <input id="birth" type="text" />
    <label for="birth">Date of Birth</label>
  </p>
</form>

CSS pseudo-class :required 不能与伪元素一起工作 ::before

CSS pseudo-class :required does not work together with pseudo-element ::before

css

pseudo-class

pseudo-element