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

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

 一、伪类选择器

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

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

猜你喜欢

转载自www.cnblogs.com/qingshanyici/p/10763329.html