2024-12-01 03:20:36

伪类选择器（Pseudo-class Selector）是 CSS 中一种特殊的选择器，用于根据元素的状态或位置来选择元素。伪类选择器的工作原理是在元素的现有状态或位置上应用样式。

伪类选择器以冒号（:）开头，后面跟着一个特定的伪类名称。常见的伪类选择器包括 :hover 、 :active 、 :focus 、 :first-child 、 :last-child 等。

以下是一些常见的伪类选择器的示例：

1.  :hover ：选择鼠标悬停在元素上时的元素。

a:hover {

    text-decoration: underline;

}

2.  :active ：选择元素处于激活状态（如按下鼠标按钮）时的元素。

button:active {

    background-color: #333;

}

3.  :focus ：选择元素获得焦点时的元素。

input[type=”text”]:focus {

    border: 2px solid #f00;

}

4.  :first-child ：选择作为其父元素的第一个子元素的元素。

p:first-child {

    font-weight: bold;

}

5.  :last-child ：选择作为其父元素的最后一个子元素的元素。

p:last-child {

    margin-bottom: 0;

}

伪类选择器的使用使得我们可以根据元素的状态或位置来应用样式，而无需为每个状态或位置创建单独的类或 ID。这使得样式的编写更加简洁和灵活。