CSS Placeholder

CSS 中的占位符，通常被称为“伪类”，是一种特殊的选择器，用于定位 HTML 元素的特定状态或情况。占位符可以在不更改 HTML 结构或引入新类或 ID 的情况下，根据元素在文档中的状态或位置来自定义样式。

在伪类名称后使用冒号来表示占位符。例如，CSS 中经常使用 `:hover`、`:active`、`:focus` 等占位符。

在深入探讨 CSS 占位符的复杂用例之前，让我们先从一些基本概念开始。

CSS 占位符基础

1. 语法：要使用占位符，请使用以下语法将其添加到目标选择器中

2. `:hover`：`:hover` 是最常用的占位符之一。当用户将鼠标悬停在元素上时，就会选中该元素。

3. `:active`：当元素处于活动状态或被访问者单击时，此选择器会定位该元素。

4. `:focus`：当元素获得焦点时（通常通过键盘导航或单击），此选择器会定位该元素。

CSS 占位符的高级用例

1. `:nth-child()`：此占位符根据元素在其兄弟元素中的排名来选择元素。它接受一个公式 (an + b) 作为参数。

2. `:not()`：因此，将选择不匹配指定选择器的元素视为无效。

3. `:first-child`、`:last-child`：这些占位符指向父容器的第一个和最后一个子元素。

4. `:before` 和 `:after`：这些插入点可以在选定元素之前或之后添加文本。

5. `:checked`：此选择器用于勾选的输入元素，例如复选框和单选按钮。

6. `:valid` 和 `:invalid`：根据输入元素的验证状态，这些占位符会定位它们。

这些只是 CSS 中简单和复杂占位符的几个示例。还有许多其他伪类和伪元素，每种都有独特的行为和应用。占位符提供了一种根据元素的位置和状态来设置其样式的强大方法，增强了 CSS 的动态性和交互性。

如何更改占位符颜色

您可以使用 CSS 来更改输入字段或文本区域元素中占位符文本的颜色。要为输入或文本区域元素中的占位符指定样式，请使用 `::placeholder` 伪元素。下面是如何更改占位符颜色的方法：

输出

在 Google Chrome 中

在 Internet Explorer 中

伪元素与伪类的区别

CSS（层叠样式表）的伪元素和伪类功能都用于为网页中的元素提供特定的状态和样式。它们提供了一种在不添加额外 HTML 语法的情况下，根据特定条件定位元素的方法。以下是两者的对比：

尽管伪类和伪元素有不同的应用，但您经常可以将它们结合起来，为 Web 组件提供更复杂和专门的样式效果。