伪元素选择器

适用范围:

1. 作用:

1. 在某个html标签内, 用CSS添加新的元素, 而不是添加新的HTML标签
2. 简化HTML结构, 使其清晰易读

视频教程:

(https://www.bilibili.com/video/BV14J4114768?p=287)

梗概:

1. 假设某个html中有一个虚假的元素
2. 伪元素选择器就能选择这个虚假的元素

注意:

child::

• 在css3之前, 伪元素选择器和伪类选择器都是使用单个冒号, 但css3已经将两者区分

指向原始笔记的链接

• 相同的伪元素会被覆盖
  • 即只能有一个before和一个after

语法:

在标签选择器后面紧跟::before或::after

1. 举例说明:

div::before {
content:'';/*必须要有这个属性, 不然其他样式不会生效*/
color:red;
}

1. 在div中的所有子标签的最前面, 添加一个CSS模拟出来的元素, 其有着自己的样式
2. 同理, div::after在所有子标签后面添加

2. 说明:

1. 伪元素必须具有content属性
2. 伪元素选择器与标签选择器一样, 权重都是1
   1. 举例div::before的权重 = 2 = 1 + 1
3. 注意, 是两个冒号