使用属性选择器的:before伪元素

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来标记必填字段，如下所示：

我希望使用CSS来标记必填字段

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

然而，这个CSS代码并没有在文档中产生可见的变化。

供参考，我使用以下代码能够修改所有必需的字段：

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

TL;DR - :before伪类能够和属性选择器一起使用吗？如果可以，如何使用？

- Mr Griever

Answer 1

:before是一个伪元素，而不是伪类。它可以与属性选择器一起使用，但在某些浏览器中无法与input元素一起使用，因为它是替换元素。（一些浏览器之所以不能使用是因为not very well-defined，虽然大多数倾向于“不行”）。

你的属性选择器能够生效的原因是因为你将样式应用于input元素本身，在每个浏览器中都可以一致地工作。

- BoltClock

---

顺便提一下，某些浏览器无论选择的实际元素是什么，都可能会出现伪元素和属性选择器的问题。我不知道这个问题是否已经修复。 - BoltClock

Answer 2

伪元素不能与input元素一起使用，因为它们没有内容。

从规范中可以看到：

作者使用:before和:after伪元素指定生成的内容的样式和位置。如它们的名称所示，:before和:after伪元素指定了元素文档树内容之前和之后的内容位置。'content'属性与这些伪元素一起使用，用于指定要插入的内容。

输入元素在DOM中没有childNodes，因此没有内容属性可供插入。

---

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

- Madara's Ghost

Answer 3

:before在<input>上不可用，因为它没有“content”-请参见：CSS content generation before or after 'input' elements获取完整说明。

传统的方法是在p或label上插入*（label更加语义化）。

- phil