:before 带有属性选择器答案

【问题标题】：:before with an attribute selector:before 带有属性选择器
【发布时间】：2020-02-24 22:10:15
【问题描述】：

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

【问题讨论】：

标签： css forms css-selectors

【解决方案1】：

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

您的属性选择器之所以起作用，是因为您将样式应用于 input 元素本身，这在每个浏览器中都可以始终如一地工作。

【讨论】：

顺便说一句，some browsers have trouble with pseudo-elements and attribute selectors regardless of actual element being selected。我不知道这是否已经修复。

【解决方案2】：

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

来自specs：

作者使用 :before 和 :after 伪元素。正如他们的名字所示， :before 和 :after 伪元素指定内容的位置 元素的文档树内容之前和之后。内容' 属性与这些伪元素一起指定什么是插入。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：