2021-05-18

css 伪元素伪类
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术： DW
作者：夜袭寡妇村
撰写时间：2021/5/17

1、伪元素
伪元素用于设置元素指定部分的样式。
比如说设置元素的首字母、首行的样式;在元素的内容之前或之后插入内容
常见的伪元素如下图



语法：
selector::pseudo-element {
property: value;
}
选择器::伪元素{
属性：属性值;
}
常用伪元素
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。
示例：





2、伪类
CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。


常用伪类：
:hover把鼠标放在链接上的状态
:nth-of-type()、:nth-of-child()等结构选择器
:checked、:disabled 等表单相关的伪类。
示例：