CSS伪类+伪元素

CSS伪类与伪元素

一.伪类

1. 语义化理解

• 伪类意思就是类似类的用法,只是这些伪类是系统指定好的

2. 用法

在选择器后面使用:连接对应的伪类
div:active{
	
}

3. 常见的伪类

:link					未访问链接
:visited				已访问链接
:hover				悬停链接
:active				活动链接
以上顺序依次从上到下
:focus				获取焦点
:first-child			第一个子元素
:last-child			最后一个子元素
:nth-child			正数第几个子元素
:nth-last-child	倒数第几个子元素

4. 伪类参考链接

https://www.w3school.com.cn/css/css_pseudo_classes.asp

二.伪元素

1. 语义化理解

• 伪元素类似于在DOM树外产生了新的元素

2. 用法

在选择器后面使用::连接对应的伪元素
div::after{
	
}

3. 常用的伪元素

::after					在元素之后插入内容
::before				在 元素之前插入内容
以上两个必须有content属性
::first-letter			选择每个元素的首字母
::first-line				选择每个元素的首行
::selection			选择用户选择的元素部分

4. 伪元素参考链接

https://www.w3school.com.cn/css/css_pseudo_elements.asp

三.区别

1.:与::

• CSS3中伪类使用: 伪元素使用::,但真的都用:也行,最好区分开

2.是否产生新元素

• 伪元素类似产生了新的元素,伪类类似新增了类