:before 带有属性选择器

我有以下 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 - :before 伪类可以与属性选择器一起使用吗？如果是这样，怎么办？

:before是伪元素，而不是伪类。它可以与属性选择器一起使用，但不能与input某些浏览器中的元素，因为它是替换元素。 （有些浏览器，因为它是定义不太明确 http://www.w3.org/TR/CSS21/generate.html#before-after-content它们是否应该起作用，尽管大多数人倾向于“不”。）

属性选择器起作用的原因是您将样式应用到input元素本身，在每个浏览器中都一致工作。