CSS3_selector

使用class属性的弊端:

1.class属性本身没有语义,纯粹是用来为CSS样式服务的,属于多余属性;
2.使用class属性,并未将样式与元素绑定,不同元素用同一个class属性会导致混乱和修改不便。

CSS3中提倡使用选择器绑定元素与样式,

新增选择器:

属性选择器(多加了通配符)

1[attr*=val] 匹配attr的属性值中含有val的元素
2[attr^=val] 匹配attr的属性值开头字符为val的元素
3[attr$=val] 匹配attr的属性值结尾字符为val的元素

伪类选择器(相比class不能顺便起名)

css2.1原有:

1:link,匹配未访问元素
2:visited,匹配已访问元素
3:hover,匹配鼠标指针停留的元素
4:active;匹配被用户输入激活的元素
【它们之间顺序很重要,它们权重相同,只会应用最后一个,互斥的伪类如:link和:visited结合使用用户代理会忽略;】

CSS3新增:

1.绑定样式到根元素html【:root】
2.排除子元素后对匹配父结构元素【Pele:not(Cele)】
3.匹配空白元素【:empty】
4.匹配链接跳转到的元素【:target】
5.匹配父元素中的第一个子元素【Pele :first-child】(css2;IE7+及其他)
6.匹配父元素中的最后一个子元素【Pele:last-child】(css3;IE9+及其他)
7.匹配正数第n个子元素【Cele :nth-child(n)】(css3;IE9+及其他;n可以是odd/even)
8.匹配倒数第n个子元素【Cele :nth-last-child(n)】(css3;IE9+及其他;n可以是odd/even )

【对除列表外元素的问题:nth-child在计算元素是奇数还是偶数元素时是连同父元素中所有子元素一起计算的,因此Cele :nth-child(odd)有时候可能并不会得到预期结果—使用下面的选择器解决】
9.匹配正数第n个同类子元素【Cele :nth-of-type(n)】(css3;IE9+及其他;n可以是odd/even)
10.匹配倒数第n个同类子元素【Cele :nth-last-of-type(n)】(css3;IE9+及其他;n可以是odd/even )
11.匹配只有一个子元素的元素【Cele:only-child】

伪元素选择器(并不是针对真正的元素而是针对CSS中已定义好的伪元素使用的选择器)

1.ele :: first-line 匹配第一行
2.ele :: first-leetter 匹配第一个字(母)
3.ele :: before 在元素前添加内容
4.ele :: after 在元素后添加内容

UI元素状态伪类选择器【各个浏览器支持不一】

1.e:hover 用于指定鼠标指针移动到元素上时的样式
2.e:active 用于指定元素被激活时的样式
3.e:focus 用于指定元素获得光标焦点时的样式【文本框最常用】
4.e:enabled 用于指定处于可用状态时的样式
5.e:disabled 用于指定处于不可用状态时的样式
6.e:read-only 用于指定处于只读状态时的样式【Firefox中加-moz-】
7.e:read-write 用于指定处于非只读状态时的样式【Firefox中加-moz-】
8.e:checked 用于指定单/复选框处于选取状态时的样式【Firefox中加-moz-】
9.e:default 用于指定页面打开时单/复选框处于选取状态时的样式【用户选取无影响;仅opera支持】
10.e:indeterminate 用于指定页面打开时整组单选框处于非选取状态的样式【用户选取有影响;仅opera支持】
11.e:selection 用于指定元素处于选中状态时的样式

通用兄弟元素选择器【同一父元素】

Bele ~ Aele 匹配同一父元素下跟在B元素后的A元素(不一定紧跟)【css3】

相邻兄弟元素选择器

Bele + Aele 匹配紧跟在B元素后的A元素

子选择器

Pele > Cele 匹配父元素的子元素

后代选择器

Pele Cele 匹配父元素的后代元素

class;id;元素等选择器

不再赘述;

相关链接

star Huang wechat
my wechat public welcomes to your attention