1、层级选择器:
子代选择器>
兄弟选择器+,这个只选择了后面第一个兄弟选择器,如果要选择后面所有的兄弟选择器,用~符号
2、属性选择器:
如果要根据属性选择,可以用中括号表示,如[class]
;
如果更具体的选择某个标签下的属性,如div[class]
;
div[class=box1]
等同于div .box1
,但是如果class有两个值,是不匹配的,这个是完全匹配,可以用div[class~=box1]
表示模糊匹配
也可以用简单的正则表达式模糊匹配,如class^=b
代表b开头的属性值、class$=b
表示b结尾的属性值、class=*b
包含b的属性值
3、伪类选择器:
第一个孩子,如ul li:first-child
,最后一个孩子,如ul li:last-child
,第几个孩子,如ul li:nth-child(num)
,如果想指定偶数的孩子,num可以为2n或者even,想指定奇数,num可以为2n-1或者2n+1或者odd
只有一个孩子的标签,如ul li:only-child
没有孩子的标签,如ul:empty
,这里的没有孩子指的是标签下没有任何内容,包括空格
:root
就是html标签
4、目标伪类选择器:
一般是配合锚点使用,div:target
表示触发这个锚点后的设置
5、UI状态伪类选择器:
一般配合表单或者文本,根据标签的状态来选择设置
选择可用的标签,如input:enabled
,选择禁用的标签,如input:disabled
,选择选中属性的标签,如input:focus
,这个一般不用设置focus,表单都自带这个属性;
对于选择标签,如input:checked
,这个也不需要设置
对于文本标签,如input::selection
,表示选择文本内容时的设置,注意这里是两个冒号
6、否定和动态伪类选择器
否定伪类选择器是不包含的意思,如ul li:not(:first-child)
表示除了第一个孩子的其它标签
动态伪类选择器一般配合链接标签使用,针对鼠标动作,跟UI状态伪类选择器用法类似,都是针对鼠标的不同动作是进行设置