css---伪类与伪元素（学习笔记）

学习文章
学习文章

伪类

定义：

伪类存在的意义是为了通过选择器找到不存在于DOM树中的信息以及普通选择器获取不到的信息

以一个冒号: 开头，如：状态型伪类（:active 向被激活的元素添加样式 :focus 向拥有键盘输入焦点的元素添加样式 :hover 当鼠标悬浮在元素上时添加样式）结构型伪类（:first-child 选择第一个元素 :nth-child() 选择某个元素的一个或多个特定子元素）

伪元素

定义：

伪元素在DOM树中创建了一些抽象元素，这些抽象元素不存在于文档语言里，一些伪元素可以使开发者获取到不存在于源文档中的内容。简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

以两个冒号:: 开头，一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。如： ::before 在元素之前添加内容 ::after 在元素之后添加内容

区别

伪类本质上弥补了css选择器的一些缺陷，获取一般选择器获取不到的信息，如：元素的状态等。
伪元素则是一个抽象的元素（虚拟容器），和一般的DOM元素没有区别，可以像普通DOM元素一样修改样式，只不过它不包含其他元素，可以包含内容。
css3中伪类以一个冒号开头，伪元素以两个冒号开头。
一个元素可以同时设置多个伪类，但是只能用一个伪元素。