：之前使用属性选择器

Question

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

Answer 1

:before是伪元素，而不是伪类。它可以与属性选择器一起使用，但是您不能将input元素与某些浏览器一起使用，因为它是替换元素。 （有些浏览器，因为它是not very well-defined它们是否应该起作用，尽管大多数倾向于“不”。）

您的属性选择器之所以有效，是因为您将样式应用于input元素本身，该元素在每个浏览器中都能正常运行。

Answer 2

调试过程：

1. 删除了属性选择器。 仍然没有明星
2. 删除了div选择器。 仍然没有明星

3. 用div select替换输入选择器， div之前的

   结论：输入有问题。

4. Google： input before css

5. 第一个结果给出了解释。

---

伪元素 do not work with input elements ，因为它们没有内容。

来自规格：

  

作者用。指定生成内容的样式和位置   ：before和：after伪元素。正如他们的名字所示，   ：before和：after伪元素指定内容的位置   元素的文档树内容之前和之后 。内容'   property与这些伪元素一起指定了什么   插入

输入元素在DOM中没有childNodes，因此没有伪元素。

---

TL; DR

伪元素适用于任何选择器，包括属性选择器，但是它们不能应用于输入。

---

简单解决方案：

将星标应用于标签而不是输入元素（如逻辑用户体验直觉所述）。

Answer 3

:before在<input>上无效，因为它没有“内容” - 请参阅：CSS content generation before or after 'input' elements获取完整说明。

“传统”的做法是在p或label上插入*（标签更具语义性）。