CSS | ::占位符选择器

简介

在CSS中，::（双冒号）占位符选择器用于匹配文档中的某个特定部分，并为其应用样式。它是CSS3增加的新特性，用于和伪元素区别开来。

语法

占位符选择器的语法如下：

::placeholder {
    /* 样式规则 */
}

适用范围

占位符选择器主要用于设置表单输入字段内部的占位符文本的样式。占位符文本是在输入字段中显示的灰色辅助文本，通常用于为用户提供关于输入预期的提示。

示例

假设我们有一个输入框，我们想要改变输入框中的占位符文本的样式，可以使用占位符选择器来实现。

HTML:

<input type="text" placeholder="请输入内容">

CSS:

::placeholder {
    color: red;
    font-style: italic;
}

在上面的示例中，我们将占位符文本的颜色设置为红色，并将字体样式设置为斜体。这样，在输入框中显示的占位符文本将使用这些样式。

注意事项

• 不是所有的浏览器都支持占位符选择器，某些旧版本浏览器可能不支持它。
• 使用占位符选择器时，需要注意浏览器的兼容性情况。
• 占位符文本的样式可能会因为浏览器的默认样式而有所不同，可以使用CSS重置来确保一致性。

以上就是关于::占位符选择器的介绍。

参考链接：MDN - ::placeholder