CSS选择器

CSS选择器分组

1. 基本选择器
2. 关系选择器
3. 属性选择器
4. 伪类选择器
5. 伪对象选择器

一、基本选择器

选择器	类型	描述
*	通配选择器	文档所有元素
#id	id选择器	选择元素为指定id标识的唯一元素
.class	类选择器	选择元素的class属性包含此class的元素集合
E	元素选择器	选择指定标签名为E的元素集合
selector1,selectorN	群组选择器	将匹配到的每个选择器合并

二、关系选择器

选择器	类型	描述
E F	后代选择器	选择所有被E包含的F元素
E > F	子选择器	选择所有E元素的F直接子元素
E + F	相邻选择器	选择紧跟在E元素之后的F兄弟元素
E ~ F	兄弟选择器	选择E元素的所有F兄弟元素

三、属性选择器

选择器	描述
[attribute]	选取带有指定属性的元素
[attribute=value]	选取属性值绝对匹配指定值的元素
[attribute^=value]	选取属性值以指定值开头的元素
[attribute*=value]	选取属性值包含指定值的元素
[attribute$=value]	选取属性值以指定值结尾的元素
[attribute|=value]	选取属性值以指定词汇开头的元素
[attribute~=value]	选取属性值包含指定词汇的元素

四、伪类选择器

选择器	描述
E:link	a超链接未被访问前的样式
E:visited	a超链接地址已被访问过时的样式
E:hover	鼠标悬停在元素上时的样式
E:active	元素在被用户激活时的样式（鼠标点击到鼠标释放之间）
E:focus	元素获取焦点时的样式
E:checked	匹配选中状态的checkbox或radio元素
E:disabled	匹配禁用状态的元素E
E:enabled	匹配可用状态的元素E
E:first-child	匹配E元素的父元素的第一个子元素E
E:first-child	匹配E元素的父元素的第一个子元素E
E:last-child	匹配E元素的父元素的最后一个子元素E
E:only-child	匹配E元素的父元素仅有一个子元素且是E元素
E:nth-child(n)	匹配E元素的父元素的第n个子元素E
E:nth-last-child(n)	匹配E元素的父元素的倒数第n个子元素E
E:first-of-type	匹配E元素的父元素的第一个特定类型的子元素E
E:last-of-type	匹配E元素的父元素的最后一个特定类型的子元素E
E:only-of-type	匹配E元素的父元素只包含一个特定类型的子元素E
E:nth-of-type(n)	匹配E元素的父元素的第n个特定类型的子元素E
E:nth-last-of-type(n)	匹配E元素的父元素的倒数第n个特定类型的子元素E
E:root	匹配E元素所在文档的根元素
E:empty	匹配没有任何子节点的E元素
E:not(F)	匹配所有除F元素外的所有E元素
E:target	活动链接到的目标E元素的样式
E:lang(fr)	匹配使用特殊语言的E元素

五、伪对象选择器

选择器	描述
E:first-letter / E::first-letter	设置对象内的第一个字符的样式
E:first-line / E::first-line	设置对象内的第一行的样式
E:before / E::before	在对象E的子节点最前面插入内容与content一起使用
E:after / E::after	在对象E的子节点最后面插入内容与content一起使用
E::placeholder	设置对象文字占位符的样式（表单占位符）
E::selection	设置对象被选择时的颜色