CSS 闲着无聊读一读，不知不觉学会CSS

作者：System 时间：2024年08月17日分类：所有,css 字数：596

这是一个关于CSS的系列学习文章，主要介绍CSS的基础知识和常用属性。这是该系列的第四篇文章，将介绍CSS中的伪类和伪元素。

伪类用于选择DOM元素的特殊状态，比如:hover、:focus、:first-child等。伪元素用于在DOM元素的内容前后插入新内容，比如::before和::after。

伪类的语法是在选择器后面加上一个冒号":", 例如 "a:hover"。




/* 链接hover效果 */
a:hover {
  color: blue;
}
 
/* 第一个子元素 */
p:first-child {
  font-weight: bold;
}

伪元素的语法是在选择器后面用两个冒号"::", 例如 "p::before"。




/* 在段落前插入内容 */
p::before {
  content: ">> ";
  color: red;
}
 
/* 在段落后插入内容 */
p::after {
  content: " <<";
  color: red;
}

注意: 在CSS2中伪元素使用单冒号":", 在CSS3中为了与伪类区分, 伪元素使用双冒号"::", 但为了兼容老版本浏览器, 单冒号的写法也被部分浏览器支持。