[分享]css中常用的伪类和伪元素

在CSS编写中，经常使用伪类和伪元素来实现一些特殊的效果。下面介绍一些常用的伪类和伪元素：1. :hover伪类a:hover { color: red; } 当鼠标悬停在链接上时，链接字体颜色变为红...

在CSS编写中，经常使用伪类和伪元素来实现一些特殊的效果。下面介绍一些常用的伪类和伪元素：

1. :hover伪类

a:hover { color: red; } 

当鼠标悬停在链接上时，链接字体颜色变为红色。

2. :active伪类

button:active { background-color: grey; } 

当按钮处于点击状态时，按钮背景颜色变为灰色。

3. :visited伪类

a:visited { color: purple; } 

当链接被访问过后，链接字体颜色变为紫色。

4. :nth-child伪类

ul li:nth-child(2n+1) { background-color: grey; } 

选取ul中的第1、3、5...个li标签，背景颜色会变为灰色。

5. :before伪元素

p:before { content: "? "; } 

在段落的开头添加一个花形符号。

6. :after伪元素

a:after { content: " ?"; } 

在链接的结尾添加一个右箭头。

除此之外，还有很多伪类和伪元素，它们可以大大丰富CSS的开发，让页面变得更加美观和有趣。