css3 伪元素和伪类选择器详解-猿码集

CSS3新增了很多伪类和伪元素选择器，它们可以帮助我们更加简单有效地实现各种效果。在本篇文章中，我们将详细介绍它们的使用方法及实现效果。

1. :hover 伪类选择器

:hover 是鼠标悬停时触发的伪类选择器，它可以用来改变元素的颜色、字号、背景等样式属性。例如，我们可以将一个链接的颜色在鼠标悬停时变为红色：


a:hover {
  color: red;
}

2. :active 伪类选择器

:active 伪类选择器用于激活（按下并松开）页面元素时改变样式，常用在按钮、链接上。例如，我们可以设置一个按钮按下时透明度变化：


button:active {
  opacity: 0.8;
}

3. :focus 伪类选择器

:focus 伪类选择器用于选中当前焦点的元素，常用于表单元素，可以通过它来改变表单元素的外观和行为。例如，我们可以使输入框得到焦点时自动出现边框：


input:focus {
  border: 1px solid #ccc;
}

4. ::before 伪元素

::before 伪元素用于在元素之前添加内容，可以用来添加文本、图标或者装饰性符号。例如，我们可以在 p 元素前添加一个双引号图标：


p::before {
  content: '"';
  font-size: 20px;
}

5. ::after 伪元素

::after 伪元素用于在元素之后添加内容，也可以用来添加文本、图标或者装饰性符号。例如，我们可以在 p 元素后添加一个双引号图标：


p::after {
  content: '"';
  font-size: 20px;
}

6. ::first-letter 伪元素

::first-letter 伪元素选中元素的第一个字母，并可以改变它的样式。例如，我们可以使第一个字母变大变粗：


p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

7. ::first-line 伪元素

::first-line 伪元素选中元素的第一行，并可以改变它的样式。例如，我们可以改变第一行的颜色：


p::first-line {
  color: red;
}

8. ::selection 伪元素

::selection 伪元素选中用户选择的文本，并可以改变它的样式。例如，我们可以将选择的文本背景变为黄色：


::selection {
  background-color: yellow；
}

总结

这里介绍了 CSS3 中可爱又好用的伪元素和伪类选择器，我们在实际的开发工作中，可以根据需求选择适合自己的选择器，来实现各种效果，提高页面的交互性和美观性。

css3 伪元素和伪类选择器详解