CSS3如何给伪元素before添加hover?

html-css015

CSS3如何给伪元素before添加hover?,第1张

CSS3给伪元素before添加hover操作:

1、伪元素的由两个冒号“::”开头,然后是伪元素的名称 ,使用两个冒号是为了区别伪类和伪元素。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号的语法,但是CSS3中新增的伪元素必须使用两个冒号;

2、一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后,如果我们利用伪元素来进行动画设置,需要给父元素添加样式(position:relative);给:after或者:before添加(position:absolute);

3、某些内容时,只用在css样式表中利用:after与:before来输入内容样式,但更多的,可以结合伪类:hover 来设置动画样式。

这里要注意的是,这几个伪类如果同时出现在一个元素的操作上,顺序不能改变,否则很大程度上会产生紊乱,效果不生效。

一、首先是C3属性选择器

1. 每一个标签都有自己的属性,是吧?要给它一个样式,就可以通过它的属性来找到它。

2. 属性选择器的权重是10

3. 都有哪些?

- 标签名[属性名]

- 标签

- 标签名[type="属性名"]

- ^= 以icon开始的选出来

- $= 以icon结尾的选出来

- *= 代表任意位置,包含该属性的就要选出来

例子

二、结构伪类选择器

语法:

nth-child(n) 释义:

- 想要选哪个n就在那个里面输入数字几就可以了

- 这里的n 可以有特殊数值偶数even 奇数odd 有利于做隔行变色

- n可以是公式

- -n+5选出前5个。

例子

三、ntf-of-type 选择器

先上总结:

- nth-child(n) 选择父元素里面的第一个 n个孩子

- of-type 选择指定类型的元素

例子

四、伪类选择器

方式一 ::before ::after

方式二 :before :after

总结:伪元素前面可以是一个冒号,也可以是两个冒号,不影响结果

例子

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。

提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全