- 伪类：单冒号，基于元素的当前状态进行设置；
- 伪元素：双冒号，设置指定元素样式；
伪类
基于元素的当前状态进行设置。
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
- ......（更多详见https://www.w3school.com.cn/css/css_pseudo_elements.asp）
例如：鼠标悬停状态
//html
<div>把鼠标移到我上面</div>
//css
div {
background-color: green;
}
div:hover {
background-color: blue;
}
div 背景默认绿色，当鼠标悬停在 div 上时，div 背景色为蓝色。
伪元素
设置指定元素样式
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
例如在内容之后插入元素：
//wxml
<h1>你好，</h1>
//css
h1::after {
content: "hello!";
}
文本显示：你好，hello!
所有 CSS 伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个<p>元素之后插入内容 |
| ::before | p::before | 在每个<p>元素之前插入内容 |
| ::first-letter | p::first-letter | 选择每个<p>元素的首字母 |
| ::first-line | p::first-line | 选择每个<p>元素的首行 |
| ::selection | p::selection | 选择用户选择的部分 |
网友评论