文章目录

基本选择器

选择器 类型 描述 兼容性 css版本
* 通配选择器 *{margin:0;padding:0},
.demo * {background:orange}		 all 1
E 元素选择器 ul {background:grey} all 1
#id all 1
.class all 1
selector,celector2 all 1

层次选择器

选择器 类型 描述 兼容性 css版本
E F 后代选择器 匹配F元素且是E元素的后代 all 1
E > F 后代选择器 匹配F元素且是E的直接子元素 IE7+ 2
E + F 相邻兄弟选择器 匹配F元素且是紧贴着E的F元素 IE7+ 2
E ~ F 通用选择器 匹配E元素后所有F元素 IE7+ 3

伪类选择器

动态伪类选择器
选择器 类型 描述 兼容性 css版本
E:link 链接伪类选择器 E元素，定义了超链接并未被访问过 all 1
E:visited 链接伪类选择器 E元素，定义了超链接已被访问过 all 1
E:active 用户行为伪类选择器 IE8+ 1
E:hover 用户行为伪类选择器 E元素，鼠标停留在元素E上 all 1
E:focus 用户行为伪类选择器 E元素，获得焦点 IE8+ 1
目标伪类选择器
选择器 类型 描述 兼容性 css版本
E:target 链接伪类选择器 E元素，元素被相关URL指向 IE9+、Opera9.6+ 3

E:target 示例
https://www.runoob.com/try/try.php?filename=trycss3_target

语言伪类选择器
选择器 类型 描述 兼容性 css版本
E:lang 语言伪类选择器 一般示例? IE8+、Opera9.2+ 2 
<!DOCTYPE html>
<html lang="en">
<style> :lang(en) { quotes: '"''"'; } :lang(fr) { quotes: '《''》'; } </style>
<body>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		<q> Quas aliquam molestias</q> nulla nemo asperiores! Maxime
		excepturi dolor velit laborum cum corporis quo aspernatur,
		corrupti nulla, possimus maiores unde soluta ipsam.
	</p>
</body>
</html>
UI元素状态伪类选择器
选择器 类型 描述 兼容性 css版本
E:checked 选中状态伪类选择器 匹配所有单选按钮或者复选按钮 IE9+ 3
E:enabled 启用状态伪类选择器 启用的表单按钮 IE9+ 3
E:disable 不可用状态伪类选择器 禁用的表单按钮 IE9+ 3
结构伪类选择器
选择器llllllllllllllIIIIIIIIIII 类型 描述 兼容性 css版本
E:fisrt-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 IE9+ 3
E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 IE9+ 3
E:root 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 IE9+ 3
E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0. IE9+ 3
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同 IE9+ 3
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素 IE9+ 3
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素 IE9+ 3
E:first-of-type 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同 IE9+ 3
E:last-of-tye 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同 IE9+ 3
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素 IE9+ 3
E:only-of-type 选择父元素只包含一个同类型子元素，且该子元素匹配E元素 IE9+ 3
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点 IE9+ 3
否定伪类选择器
选择器 类型 描述 兼容性 css版本
E:not(F) 否定伪类选择器 匹配除了F元素的所有E元素 IE9+ 3

伪元素

属性 描述 兼容性 css版本
::frist-letter 选择文本块的第一个字母
::frist-line 选择文本块的第一行
::before 元素前插入icon但不会成为DOM一部分，但是可以添加样式
::after
::selection 选择的文本 IE9+

属性选择器

选择器 描述 兼容性 css版本
[attr] 用于选取带有指定属性的元素。 7+
[attr=val] 用于选取带有指定属性和值的元素。 7+
[attr~=val] 用于选取属性值中包含指定词汇的元素。 7+
[attr|=val] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 7+
[attr^=val] 匹配属性值以指定值开头的每个元素。 7+
[attr$=val] 匹配属性值以指定值结尾的每个元素。 7+
[attr*=val] 匹配属性值中包含指定值的每个元素。 7+

通配符解释

通配符 功能描述 示例
^ 匹配起始符 span[class^=span] 以类名span开头的所有span元素
$ 匹配终止符 a[href$=pdf] 匹配以pdf结尾的href属性的所有a元素
* 匹配任意字符 a[title*=site] 匹配a元素，而且a元素的title属性值中任意位置有site字符的字符串