：与前一个属性选择(:before with an attribute selector)

我有以下的HTML表单

<div>
    <p>Field1</p>
    <input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
    <p>Field2</p>
    <input type="text" name="fld_two" id="fld_two" required value="" />
</div>

我想用CSS来标记，像这样必填字段

div input[required]:before { color: #f00; content: "*"; }

然而这个CSS行不会使文档中的明显变化。

作为参考，我能够修改所有的必填字段有以下：

div input[required] { background-color: #000; }

TL; DR - 可否：前伪类与属性选择使用？如果是这样，怎么样？

Answer 1:

:before是一个伪元素，而不是一个伪类。它可以用属性选择器可以使用，但你不能用它input ，因为它是一个替换元素在一些浏览器元素。（有些浏览器，因为它不是很明确，无论他们应该工作，虽然大多数精益朝着“无”。）

为什么你的属性选择器的工作原理的原因是因为你申请样式的input元素本身，这在所有的浏览器都能正常工作。

Answer 2:

:before不在有效<input> ，因为它不具有“内容” -见：之前或之后“输入”元素CSS内容生成更全面的解释。

做它的“传统”的方式将在* p或label （标签是更多的语义）。

Answer 3:

调试过程：

移除属性选择。 仍然没有明星
删除DIV选择。 仍然没有明星
更换输入选择DIV的选择， 星之前DIV
结论：输入是有问题的。
谷歌： 输入之前的CSS
第一个结果给出了解释。

伪元素不工作input元素 ，因为他们有没有内容。

从规格：

作者指定的样式和生成的内容的位置与：before和：伪元素之后。正如其名称所表明，：before和：after伪元素和前一个元素文档树内容后指定的内容的位置。的“内容”属性，在与这些伪元素一起，指定了插入。

输入元素没有的childNodes在DOM，因此，没有伪构件。

TL; DR

伪元素与任何选择工作，选择属性包括，但是，他们不能投入应用。

简单的解决方案：

应用星标签，而不是输入要素（如逻辑用户体验的直觉状态）。

文章来源: :before with an attribute selector