WEB前端 -- CSS伪类、伪元素选择器

一、伪类选择器

伪类通过冒号(:)进行定义,它定义了元素的状态,如点击按下、点击完等。以前都是直接操作元素的样式,现在可为元素的状态改样式,看上去更“动态”。

伪类一般反映无法在CSS中轻松或可靠检测到的某个元素的状态或属性。

伪类更多地是定义元素的状态。

伪类选择器:

1)E:link

2)E:visited

3)E:hover

4)E:active

5)E:not(S) 匹配不包含S的E元素

6)E:first-child

7)E:last-child

8)E:only-child

9)E:empty

10)E:checked

11)E:nth-child(n)

二、伪元素选择器

伪对象即伪元素,表示DOM外部的某种文档结构。

伪元素改变文档结构,在结构外另加一个没有实际存在的元素(即伪元素)。

常用伪元素:

1)E:before/E::before

2)E:after/E::after

伪元素添加图片时与普通元素一样要指定为块元素、宽和高。

如p::after{content:"";background:url();display:inline-block;width:20px;height:50px;}

例:为选中的选项设置背景颜色及选中项后面加“我被选中了”

颜色最喜欢的颜色
颜色喜欢的颜色