:：之前带有属性选择器

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

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

从input：

作者使用-指定所生成内容的样式和位置：before和：after伪元素。顾名思义，：before和：after伪元素指定内容的位置元素的文档树内容之前和之后。内容'属性与这些伪元素一起指定了什么是插入。

输入元素在DOM中没有childNodes，因此，没有要插入的content属性。

---

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

Answer 3

specs在:before上无效，因为它没有“内容”-有关完整说明，请参见：<input>。

“传统方式”是在CSS content generation before or after 'input' elements或p上插入*（标签更具语义）。