：之前用属性选择器 [英] :before with an attribute selector

问题描述

我有以下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来标记必填字段，例如

I want to use CSS to mark required fields like so

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

但是，这个css行不会对文档产生明显的变化。

However this css line does not make a visible change in the document.

对于引用，我能够使用以下内容修改所有必填字段：

For reference I was able to modify all required fields with the following:

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

TL; DR - 可以：before伪类与属性选择器一起使用吗？如果是，如何？

TL;DR - Can the :before pseudo-class be used with an attribute selector? If so, how?

推荐答案

：before ，不是伪类。它可以与属性选择器一起使用，但是不能与一些浏览器一起使用 input 元素，因为它是一个替换的元素。 （某些浏览器，因为它是不太明确的 ）

:before is a pseudo-element, not a pseudo-class. It can be used with an attribute selector, but you can't use it with input elements with some browsers because it is a replaced element. (Some browsers, because it's not very well-defined whether they're supposed to work, although most lean toward "no".)

您的属性选择器的工作原因是因为您要将样式应用于 input 元素本身，它在每个浏览器中一致工作。

The reason why your attribute selector works is because you're applying styles to the input element itself, which works consistently in every browser.

这篇关于：之前用属性选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！