css3中的伪类和伪元素

CSS3是CSS技术的升级版，带来了许多新的特性，其中伪类和伪元素是常见的应用。伪类和伪元素可以在HTML元素上添加一些特殊的样式，让页面更加丰富和动态。

/* 伪类 */
a:link {
color: blue;
}
a:hover {
color: red;
}
input[type="text"]:focus {
border-color: green;
}
/* 伪元素 */
p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 2em;
}
blockquote::before {
content: "\201C";
font-size: 2em;
}
blockquote::after {
content: "\201D";
font-size: 2em;
}

上面是一些常见的伪类和伪元素的用法。伪类 a:link 用来定义链接的默认样式，伪类 a:hover 定义当鼠标移动到链接上时的样式，伪类 input[type="text"]:focus 定义输入框在获取焦点时的样式。

伪元素 p::first-line 用来定义段落第一行的样式，伪元素 p::first-letter 定义段落第一个字的样式，伪元素 blockquote::before 和 blockquote::after 用来给引用块添加前后标记。

除了上述示例，伪类和伪元素的用法非常多，如：hover、active、focus、last-child、nth-child等等。使用起来非常方便，可以让我们在不增加额外标签的情况下实现一些效果。

查看更多关于css3中的伪类和伪元素的详细内容...