伪类
定义:
伪类存在的意义是为了通过选择器找到不存在于DOM树中的信息以及普通选择器获取不到的信息
以一个冒号: 开头,如:状态型伪类(:active 向被激活的元素添加样式 :focus 向拥有键盘输入焦点的元素添加样式 :hover 当鼠标悬浮在元素上时添加样式)结构型伪类(:first-child 选择第一个元素 :nth-child() 选择某个元素的一个或多个特定子元素)
伪元素
定义:
伪元素在DOM树中创建了一些抽象元素,这些抽象元素不存在于文档语言里,一些伪元素可以使开发者获取到不存在于源文档中的内容。简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。
以两个冒号:: 开头,一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。如: ::before 在元素之前添加内容 ::after 在元素之后添加内容
区别
伪类本质上弥补了css选择器的一些缺陷,获取一般选择器获取不到的信息,如:元素的状态等。
伪元素则是一个抽象的元素(虚拟容器),和一般的DOM元素没有区别,可以像普通DOM元素一样修改样式,只不过它不包含其他元素,可以包含内容。
css3中伪类以一个冒号开头,伪元素以两个冒号开头。
一个元素可以同时设置多个伪类,但是只能用一个伪元素。