2024年3月6日发(作者：)

css伪类得用法

CSS伪类是一种特殊的CSS选择器，它允许我们根据元素的状态或位置来应用样式。伪类选择器通常以一个冒号（:）和一个表示状态或位置的单词组成。本文将详细介绍CSS伪类的用法。

一、常用伪类

1. :hover

:hover 伪类表示鼠标悬停在元素上时的状态。例如，我们可以使用 :hover 伪类来改变按钮在鼠标悬停时的背景颜色：

```css

button {

background-color: blue;

}

button:hover {

background-color: red;

}

```

2. :active

:active 伪类表示元素当前被激活（如鼠标按下）的状态。例如，我们可以使用 :active 伪类来改变按钮在被点击时的背景颜色：

```css

button {

background-color: blue;

第 1 页

}

button:active {

background-color: red;

}

```

3. :focus

:focus 伪类表示元素当前获得焦点（如光标置于其上）的状态。例如，我们可以使用 :focus 伪类来改变输入框在获得焦点时的背景颜色：

```css

input[type="text"] {

background-color: blue;

}

input[type="text"]:focus {

background-color: red;

}

```

4. :first-child, :last-child, :nth-child(n)

这些伪类表示元素在同级元素中的位置。例如，我们可以使用 :first-child 伪类来改变列表项中第一个列表的样式：

```css

ul > li:first-child {

color: red;

第 2 页

}

```

5. :checked

:checked 伪类表示复选框或单选按钮当前被选中。例如，我们可以使用 :checked 伪类来改变复选框在选中时的背景颜色：

```css

input[type="checkbox"] {

background-color: blue;

}

input[type="checkbox"]:checked {

background-color: red;

}

```

6. :disabled, :enabled

:disabled 和 :enabled 伪类表示元素的禁用或启用状态。例如，我们可以使用 :disabled 伪类来改变禁用按钮的样式：

```css

button {

background-color: blue;

}

button:disabled {

background-color: red;

第 3 页

}

```

二、其他伪类

1. :before 和 :after

:before 和 :after 伪类可以在元素的内容（内容本身以及其后所有的子元素）之前或之后插入内容。例如，我们可以使用 :before 伪类来在段落前面插入项目符号：

```css

p:before {

content: '•';

}

```

2. :root 和 :empty

:root 伪类选择根元素，而 :empty 伪类选择没有子元素的元素。例如，我们可以使用 :root 伪类来改变根元素的样式：

```css

:root {

color: red;

}

```

3. :not()

:not() 是一个重要的伪类，它允许你排除某个元素或元素组。例如，如果你

第 4 页

想改变除链接之外的所有元素的样式，你可以这样做：

```css

body :not(a) {

color: red;

}

```

4. :target

:target 伪类表示当前页面中锚点目标的位置。例如，我们可以使用 :target 伪类来改变链接的目标样式：

```css

a:target {

background-color: red;

}

```

5. :fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :fullscreen-element

这些伪类表示元素是否处于全屏状态。例如，我们可以使用 :fullscreen 伪类来改变全屏视频图的样式：

```css

video::fullscreen {

background-color: red;

}

第 5 页

```

6. :placeholder

:placeholder 伪类表示元素的占位符。例如，我们可以使用 :placeholder 伪类来改变输入框的占位符颜色：

```css

input[type="text"]::placeholder {

color: red;

}

```

三、总结

CSS伪类提供了一种强大的方式来根据元素的状态或位置来应用样式。通过熟悉这些伪类及其用法，你可以创建出更加丰富和动态的页面样式。

第 6 页