css - :before with an attribute selector

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 元素本身，它在每个浏览器中都一致地起作用。