4

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

4

3 回答 3

6

:before是伪元素，不是伪类。它可以与属性选择器一起使用，但在input某些浏览器中不能与元素一起使用，因为它是替换元素。（一些浏览器，因为它们是否应该工作并没有很好的定义，尽管大多数人倾向于“不”。）

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

于 2012-09-13T17:39:11.027 回答
5

伪元素不适用于input元素，因为它们没有内容。

从规格：

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

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

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

于 2012-09-13T17:39:45.287 回答
3

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

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

于 2012-09-13T17:41:51.883 回答