伪类选择器与伪元素选择器

之前总以为这两个东西是一样的，其实他们的作用大不相同哦。他们的作用是：可以为文档中不一定存在的结构制定样式，他们不是通过文档结构向页面中添加样式。

 一、伪类选择器

是用来选择某个类，或者说，选择的是某个类的状态。

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;
}

 

转载于:https://www.cnblogs.com/qingshanyici/p/10763329.html