css3中的三种选择器
1. 选择器：
CSS3新增了许多灵活查元素的⽅法，极⼤的提⾼了查元素的效率和精准度。CSS3选择器与jQuery中所提供的绝⼤部分选择器兼容
1. ⼀属性选择器：
a) E[attribute] 表⽰存在attr属性即可；
div[class]
b) E[attr=val] 表⽰属性值完全等于val；
div[class=mydemo]
c) E[attr*=val] 表⽰的属性值⾥包含val字符并且在“任意”位置；
div[class*=mydemo]
d) E[attr^=val] 表⽰的属性值⾥包含val字符并且在“开始”位置；
div[class^=mydemo]
e) E[attr$=val] 表⽰的属性值⾥包含val字符并且在“结束”位置；
div[class$=demos]
2. ⼆伪类选择器-伪元素选择器：
a) 之前学习的：a:hover a:link a:active a:visited
b) 以某元素相对于其⽗元素或兄弟元素的位置来获取⽆素的结构伪类
f) E:first-child：查E这个元素的⽗元素的第⼀个⼦元素E
g) E:last-child：最后⼀个⼦元素
h) E:nth-child(n): 第n个⼦元素，计算⽅法是E元素的全部兄弟元素
i) E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
j) E:nth-child(even): 所有的偶数
k) E:nth-child(odd): 所有的奇数
l) E:nth-of-type(n)：指定类型
m) E:empty 选中没有任何⼦节点的E元素，注意，空格也算⼦元素
n) E:target 结合锚点进⾏使⽤，处于当前锚点的元素会被选中
o) 重点说明：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取⽆效
p) 案例代码：
/*第⼀个li元素*/
li:first-child{
color: red;
}
/*最后⼀个元素*/
li:last-child{
color: green;
}
/*获取第10个元素*/
li:nth-child(10){
color: orange;
}
/*获取倒数第3个li元素*/
li:nth-last-child(3){
color: purple;
}
/
*获取索引顺序为6的倍数的li元素*/
li:nth-child(6n){
text-decoration: underline;
border: 1px solid red;
}
/*获取所有索引为偶数的li元素*/
li:nth-child(even){
border: 1px solid black;
}
/*获取前5个li元素*/
li:nth-child(-n+5){
background-color: #ddd;
}
3. /*获取除了第⼀个外的元素*/
li:nth-child(n+2){
}
c) n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等
三伪元素选择器：cssclass属性
a) 重点：E::before、E::after
i. 是⼀个⾏内元素，需要转换成块:display:block float:** position:
ii. 必须添加content，哪怕不设置内容，也需要content:””
iii. E:after、E:before 在旧版本⾥是伪类，在新版本⾥是伪元素，新版本下E:after、E:before会被⾃动识别为E::after、E::before，按伪元素来对待，这样做的⽬的是⽤来做兼容处理
iv. E::before: 定义在⼀个元素的内容之前插⼊属性定义的内容与样式
v. E::after: 定义在⼀个元素的内容之后插⼊属性定义的内容与样式
vi. 注意：
1. IE6、IE7与IE8（怪异模式Quirks mode）不⽀持此伪元素
2. CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念 E::before和
E::after，并且归属到了伪元素当中，伪类⾥就不再存在E:before或者 E:after伪类
b) E::first-letter⽂本的第⼀个字母或字(不是词组)
c) E::first-line ⽂本第⼀⾏
d) E::selection 可改变选中⽂本的样式
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论