如何内联定义伪元素样式？以::placeholder样式为例

嘿，很明确地告诉你：不能通过内联的style=""属性来定义::placeholder伪元素的样式。

原因很简单：伪元素（比如::placeholder、::before这类）是CSS在元素基础上额外创建的虚拟元素，并不属于HTML元素本身的DOM节点。而内联的style属性只能为当前HTML元素设置直接的CSS属性，没办法触达这类由CSS生成的伪元素。

那如果想单独给某个input的placeholder设置样式，你可以用更精准的选择器来替代：

• 利用元素的id选择器：

#date::placeholder {
  color: red;
}

• 或者给元素加自定义类：

<input id="date" name="date" placeholder="Please select release date" type="text" class="custom-date-input"/>

.custom-date-input::placeholder {
  color: red;
}

这样既可以精准控制单个元素的placeholder样式，又符合CSS的规范。

内容的提问来源于stack exchange，提问作者Tanja16