css3选择器总结
1.属性选择器
[attr=val]: 选取attr属性的属性值是val的元素
例:[type=text]选取type属性值是text的元素
[attr*=val]:选取attr属性的属性值中包含val字符元素
例:[class*=sel]选择class属性的属性值包含sel的元素
[attr^=val]:选取attr属性的属性值开头是val字符开头的元素
例:[class^=sel]选择class属性的属性值是以sel开头的元素
[attr$=val]:选取attr属性的属性值是val字符结尾的元素
例:[src^=jpg]选择src属性的属性值是以jpg结尾的元素
2.伪元素选择器
p:first-line 选取段落的第一行
p:first-letter 选取段落的首字母或第一个字
p:before 表示在段落之行插入一些内容
p:after 表示在段落之后插入一些内容
:root 根元素选择器
:not 不包含这个元素,例:p:not(a)//a是p元素下面的子结构元素
:empty 指元素内容为空的时候
:target 如果某个链接的href设置某个元素的ID时,点击这个链接时,跳转到那个元素后,再会作用这些样式
3.子选择器
li:first-child 选中每个ul列表中的第一个li元素
li:last-child 选中每个ul列表中的最后一个li元素
li:nth-child(1) 选中每个ul列表中的第一个li元素
li:nth-last-child(1) 选中每个ul列表中的最后一个li元素
li:nth-child(odd) 选中每个ul列表中奇数 的li元素
li:nth-last-child(even)选中每个ul列表中倒数偶数的li元素
p:nth-of-type(odd)选中p类型的奇数位的元素
li:nth-child(4n+1) 循环使用样式//4表示每次循环的长度,1表示第1个
li:only-child 表示只有一个li元素
4. UI元素状态伪类选择器
input:hover 鼠标指针移到input框时
input:active 鼠标在元素上按下还没有松开的时候
input:focus input框获取焦点时
input:enabled input处于可用状态时
input:disabled input处于不可用状态时
input:read-only 只能读的input框
input:read-write 处于非只读状态的input框
input:checked 选中的checkbox和radio框
input:default 表示页面找开时就被选中的checkbox或input框,哪怕后来将这个选中的框改为非选中状态,该样式也不消失
p:selection 表示p元素被选中时,该样式生效
5.通用兄弟元素选择器
div~p 表示div元素后面兄弟P元素