Css ：在使用属性选择器之前

我有下面的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] { background-color: #000; }

---

TL；DR-before伪类可以与属性选择器一起使用吗？如果是，怎么做？

：before

是伪元素，而不是伪类。它可以与属性选择器一起使用，但在某些浏览器中不能与

input

元素一起使用，因为它是替换的元素。（有些浏览器，因为这取决于它们是否应该工作，尽管大多数浏览器倾向于“否”。）

属性选择器工作的原因是您正在将样式应用于

输入

元素本身，该元素在每个浏览器中都能一致工作。

伪元素，因为它们没有内容

从：

作者使用 ：在伪元素之前和：在伪元素之后。正如他们的名字所表明的那样 ：before和：after伪元素指定内容的位置 在元素的文档树内容之前和之后。“内容” 属性与这些伪元素一起指定 插入

输入元素在DOM中没有子节点，因此没有要插入的内容属性

---

---

作为一种可能的解决方法，将星号应用于标签，而不是输入元素

:before

在

上无效，因为它没有“内容”-请参阅：以获取完整解释

“传统”的做法是在

p

或

标签上插入*on

（标签更具语义）

顺便说一下。我不知道这个问题是否已经解决。

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