之前总以为这两个东西是一样的,其实他们的作用大不相同哦。他们的作用是:可以为文档中不一定存在的结构制定样式,他们不是通过文档结构向页面中添加样式。
一、伪类选择器
是用来选择某个类,或者说,选择的是某个类的状态。
1、链接伪类
【:link】:
【:visited】
2、动态伪类
【:focus】
【:hover】
【:active】
3、静态伪类
【:first-child】:选择元素的第一个子元素。
【*:lang(语言类名)】:将文档中的某个语言全部改为某个样式。
4、伪类的结合使用
【a:link:hover】
注意不要将互斥的伪类结合在一起使用,用户代理会忽略这种选择器。
二、伪元素选择器
是用来在文档中插入假象的元素。CSS2.1的写法。
1、首字母和首行
【:first-letter】:
【:first-line】:
2、之前和之后
【:before】:
【:after】:
三、伪元素的常见用法
问:经常见到::after和:after,为什么会出现单冒号和双冒号?
答:单冒号用于CSS3伪类,双冒号英语css3伪元素。在CSS3中引入伪元素不再允许使用单冒号的写法,因此以后在某元素前后插入内容,要用双引号。
清除浮动的主流写法,就是利用伪类的概念
.clearf::after, .clearf::before{ content:" "; display:block; clear:both; }