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元素