css3中的三种选择器

选择器：

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]
二伪类选择器-伪元素选择器：

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;
}
/*获取除了第一个外的元素*/
li:nth-child(n+2){

}

c) n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等
三伪元素选择器：

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: 定义在一个元素的内容之前插入content属性定义的内容与样式

v. E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式

vi. 注意：

IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素
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 可改变选中文本的样式

转载于:https://www.cnblogs.com/qdxbls/p/11057759.html

css3中的三种选择器

猜你喜欢