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的单冒号写法比较安全