Css知识之伪类和伪元素

有时候给总结的内容放小一点，更容易坚持...

伪类和伪元素的区别

1. 伪类（: 单冒号）
   作用：选中元素的「状态 / 位置」
   比如：鼠标悬浮、第一个子元素、点击时
   符号：:
2. 伪元素（:: 双冒号）
   作用：创建元素里不存在的「虚拟子元素」
   比如：文字前加图标、第一段首字放大、加装饰小箭头
   符号：::

1. 伪类 【状态】

• 1. :hover 鼠标悬浮（pc端鼠标上移自定义按钮-出现手形状）
• 2. :active 点击激活时（移动端，点击自定义按钮变色，文字大小变化等）
• 3. :nth-child(2) / :first-child 选第几个子元素
     li:first-child {
     color: blue;
     }

2. 伪元素【创建虚拟节点】

• 1. ::before 在元素前面加内容
     .title::before {
     content: "✅ ";
     }
• 2. ::after 在元素后面加内容
     .btn::after {
     content: "→";
     }
• 3. ::first-letter 选第一个字（首字下沉）
     p::first-letter {
     font-size: 30px;
     color: red;
     }

3.优先级大小排序（伪类 > 伪元素）

从高到低：行内样式 > ID > 类 = 伪类 > 标签 = 伪元素 > 通配符

4.一个元素可以用多个伪元素吗？

答：不可以！一个元素只能有 1 个 ::before + 1 个 ::after，不能多。