CSS选择器

一.基本选择器

序号	选择器	含义	举例
1	*	通用元素选择器，  匹配任何元素	* { margin:0; padding:0; }
2	E	标签选择器，        匹配所有使用E标签的元素	p { font-size:2em; }
3	.info或E.info	class(类)选择器，  匹配所有class属性中包含info的元素	.info { background:#ff0; }
4	#info或E#info	id选择器，           匹配所有id属性等于info的元素	p#info { background:#ff0; }

二.组合选择器

序号	选择器	含义	举例
5	E,F	多元素选择器(群组选择器)，同时匹配所有E元素或F元素，E和F之间用逗号分隔	Div,p { color:#f00; }
6	E F	后代(元素)选择器，  匹配所有属于E元素后代的F元素，E和F之间用空格分隔	#nav li { display:inline; }
7	E>F	子(元素)选择器，   匹配所有E元素的子元素F,与后代选择器相比，子元素选择器                     只能选择作为某元素子元素的元素。即只对直接后代有影响，                     而对“孙子”以及多个层的后代不产生作用。	div > strong { color:#f00; } 这个规则会把第一个 h1 下面的  strong 元素变为红色， 但是第二个 strong 不受影响
8	E+F	毗邻元素选择器(又叫相邻同胞选择器)，  匹配所有紧随E元素之后的同级元素F	h1 + p {color:blue}；h1元素后面紧跟了 多个段落p元素，但只有第一个段落变蓝

三.属性选择器：属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性

序号	选择器	含义	举例
9	E[att]或E[att1][att2]	简单属性选择器；匹配所有具有att属性的E元素， 不考虑它的值;如果具有多个属性，需要同时匹配多个属性。 （注意：E在此处可以省略，比如"[cheacked]"。以下同。）	p[title] { color:#f00; } a[title][href]{color:red}
10	E[att=val]	具体属性值选择器； 匹配所有att属性等于“val”的E元素 属性与属性值必须完全匹配。	div[class=”error”] { color:#f00; }
11	E[att~=val]	部分属性值选择 匹配所有att属性具有多个空格分隔的值、 其中一个值等于“val”的E元素	td[class~=”name”] { color:#f00; }
12	E[abc^="def"]	子串匹配属性选择器， 选择 abc 属性值以 "def" 开头的所有元素	a[href^="w3school.com.cn"]
13	E[abc$="def"]	子串匹配属性选择器, 选择 abc 属性值以 "def" 结尾的所有元素	a[href$="w3school.com.cn"]
14	E[abc*="def"]	子串匹配属性选择器, 选择 abc 属性值中包含子串 "def" 的所有元素	a[href*="w3school.com.cn"]
15	E[att|=val]	特定属性选择类型, 这个规则会选择 att属性等于val或以 val- 开头的所有元素, 主要用于lang属性	*[lang|="en"] {color: red;}

四.伪类选择器(伪类选择元素基于的是当前元素处于的状态)

     css2.1中的伪类

序号	选择器	含义	举例
16	E:first-child	向元素的第一个子元素添加样式。	p:first-child { color:red} 如果有多个p元素段落， 仅第一个段落内的文字变红
17	E:link	向未被访问的链接添加样式。	a:link {color: #FF0000}
18	E:visited	向已被访问的链接添加样式。	a:link {color: #00FF00}
19	E:hover	当鼠标悬浮在元素上方时，向元素添加样式。	a:link {color: #0000FF}
20	E:active	向被激活的元素添加样式。	a:link {color: #FFFF00}
21	E:focus	向拥有键盘输入焦点的元素添加样式。	input:focus{ background-color:yellow;}
22	E:lang(c)	匹配lang属性等于c的E元素	q:lang(no){quotes: "~" "~"}

五.CSS2.1中的伪元素(与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作)

序号	选择器	含义	举例
23	E:first-line	匹配E元素的第一行 "first-line" 伪元素只能用于块级元素。	p:first-line   {color:#00ff00;}
24	E:first-letter	匹配E元素的第一个字母 "first-letter" 伪元素只能用于块级元素。	p.article:first-letter   {color:#ff0000;}
25	E:before	在E元素之前插入生成的内容	h1:before {content:url(/i/w3school_logo_white.gif)}
26	E:after	在E元素之后插入生成的内容	a:after{content: " (" attr(href) ")";} 链接后插入括号中的 URL

六、CSS 3的同级元素通用选择器

序号	选择器	含义	举例
27	E ~ F	匹配任何在E元素之后的同级F元素	p ~ ul { background:#ff0; }

七、CSS 3中与用户界面有关的伪类

序号	选择器	含义	举例
28	E:enabled	匹配表单中激活的元素 (大部分元素默认激活)	input[type="text"]:enabled    { background-color: #ff0000;}
29	E:disabled	匹配表单中禁用的元素	input:disabled
30	E:checked	匹配表单中被选中的radio（单选框） 或checkbox（复选框）元素	input:checked { background-color: #ff0000;}
31	E::selection	匹配用户当前选中的元素	::selection{color:#ff0000;}

八、CSS 3中的结构性伪类

序号	选择器	含义	举例
32	E:root	匹配文档的根元素，对于HTML文档， 就是HTML元素	:root{background:#ff0000;}  在html文档的中，E元素只能是HTML 可以省略不写
33	E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1 不论元素的类型,n 可以是数字、关键词或公式。	p:nth-child(2) {background:#ff0000;}
34	E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1	p:nth-last-child(2) {background:#ff0000;}
35	E:nth-of-type(n)	选择器匹配属于父元素的特定类型的 第 N 个子元素的每个元素	p:nth-of-type(2) {background:#ff0000;}
36	E:nth-last-of-type(n)	选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素	p:nth-of-type(2) {background:#ff0000;}
37	E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)	p:last-child {background:#ff0000;}
38	E:first-of-type	匹配父元素下使用同种标签的第一个子元素， 等同于:nth-of-type(1)	p:first-of-type {background:#ff0000;}
39	E:last-of-type	匹配父元素下使用同种标签的最后一个子元素， 等同于:nth-last-of-type(1)	p:last-of-type {background:#ff0000;}
40	E:only-child	匹配父元素下仅有的一个子元素,等同于: first-child:lastchild或 :nth-child(1):nth-last-child(1)	p:only-child {background:#ff0000;}
41	E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素， 等同于:first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1)	p:only-of-type {background:#ff0000;}
42	E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素	p:empty {width:100px;height:20px; background:#ff0000;}

九、否定伪类

序号	选择器	含义	举例
43	E:not(s)	匹配不符合当前选择器的任何元素	:not(p){color:#ff000; }

十、CSS 3中的 :target 伪类

序号	选择器	含义	举例
44	E:target	匹配文档中特定"id"点击后的效果 URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。 这个被链接的元素就是目标元素(target element)。 用于选取当前活动的目标元素	:target {border: 2px solid  #D4D4D4; background-color: #e5eecc;}

子串匹配属性选择器