主要内容： 常见的CSS选择器、选择器的优先级。

class 和 id 选择器

class 和 id 选择器的区别和使用场景

• class 选择器 ：class 重在样式的复用，重普遍性。 想要对多个元素使用某个样式时，就要用到class，class 选择器 以 “.” 来定义。

• id 选择器 ：id重在划分样式区域，可以作为样式表中的命名空间来管理样式。id也可以指定某一个特殊元素的样式，重特殊性。

只有一个元素需要加样式， 或者页面上只有一个元素， 那就应该使用id。id 属性就是用来唯一地命名元素 ， id 选择器以 "#" 来定义。

使用方法

第一步：使用合适的标签把要修饰的内容标记起来
第二步：使用class=“类选择器名称” （或者 id =“id 选择器名称”）为标签设置一个类
第三步：设置类选器CSS样式

注意：在html中声明多个一样的ID的元素，在css中该ID的样式，这些元素则都会生效。而在javascript中用DOM选择器只会选到第一个元素。

常见的CSS选择器

基础选择器

选择器	含义	例子	例子描述
* 选择器	通用元素选择器， 选择所有元素（很少使用）	*{ background-color:yellow;}	选择所有元素，并设置它们的背景色为黄色
#id	id选择器，匹配特定id的元素	#guarantee{ color: #444444;}	为 id="guarantee" 的元素设置字体颜色
.class	类选择器, 匹配class包含(不是等于)特定类的元素	.intro{ font-size: 120%;}	选择并设置 class="intro" 的元素的字体大小
element	标签选择器 , 指定元素名称的所有元素	p{ line-height: 120% ;}	选择并设置p元素的行高

组合选择器

选择器	含义	例子	例子描述
element1,element2	多元素选择器，用 , 分隔，同时匹配element1或element2	h1,p { background-color: yellow;}	选择并设置所有 <h1> 样式和所有 <p> 元素的样式
element1 element2	后代选择器，用空格分隔，匹配element1 所有的后代（不只是子元素、子元素向下递归）元素element2 （ 用于选取元素内部的元素 ）	div p{ background-color: yellow;}	选择并设置位于 <div> 元素内部的每个 <p> 元素的样式
element1>element2	子元素选择器，用>分隔，匹配element1的所有直接子元素 （用于选取带有特定父元素的元素）	div>p{ background-color: yellow;}	选取父元素是 <div> 的元素的每个 直接子元素<p>
element1+element2	直接相邻选择器，匹配element1之后的相邻的同级element2	div+p{ background-color: yellow;}	选择 <div> 元素之后紧跟的 <p> 元素，并设置其背景色
element1~element2	普通相邻选择器（弟弟选择器），匹配element1之后的同级element2 （无论直接相邻与否, 但两种元素必须拥有相同的父元素）	p~ul{background: #ff0000;}	为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景
.class1.class2 （#id1#id2）	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 , 仅可以选择同时包含这些类名的元素（类名/id名顺序不限）	.important.urgent {background: silver;}	选择并设置 class 属性中包含词 important 和 urgent 的元素 的背景色
element#id	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素	-	一般不这样用， 因为 id 选择器具有唯一性， 直接使用 id 选择器就可以了

属性选择器

属性选择器用的相对少一些

选择器	含义	例子	例子描述
element[attr]	匹配所有具有属性attr的元素，用于选取带有指定属性的元素	a[target]{ background-color: yellow;}	带有 target 属性的链接会得到黄色背景
element[attr = value]	匹配属性attr值为value的元素，用于选取带有指定属性和值的元素	a[target=_blank]{ background-color: yellow;}	target="_blank" 的链接会得到黄色背景
element[attr ~= value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 ,用于选取属性值中包含指定词汇的元素	[title~=flower]{ background-color: yellow;}	title 属性中包含单词 "flower" 的图片会获得黄色边框
element[attr ^= value]	匹配属性值以指定值开头的每个元素	div[class^="test"] { background: #ffff00;}	设置 class 属性值以 "test" 开头的所有 div 元素的背景色
element[attr $= value]	匹配属性值以指定值结尾的每个元素	div[class$="test"] { background: #ffff00;}	设置 class 属性值以 "test" 结尾的所有 div 元素的背景色
element[attr *= value]	匹配属性值包含指定值的每个元素	div[class*="test"] { background: #ffff00; }	设置 class 属性值包含 "test" 的所有 div 元素的背景色

伪类选择器

选择器	含义	例子	例子描述
element:first-child	匹配作为长子（第一个子女）的元素 ， 用于选取属于其父元素的首个子元素的指定选择器	p:first-child{ background-color: yellow;}	选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式
element:link	匹配所有未被点击的链接	a:link{ background-color: yellow;}	选择未被访问的链接，并设置其样式
element: visited	匹配所有已被点击的链接	a:visited{ background-color: yellow;}	选择已访问的链接，并设置其样式
element:active	匹配鼠标已经其上按下、还没有释放的元素 （也叫活动链接）	a:active{ background-color: yellow;}	选择活动链接，并设置其样式
element:hover	匹配鼠标悬停其上的元素 （hover 选择器可用于所有元素，不只是链接）	a:hover{ background-color: yellow;}	选择鼠标指针浮动在其上的元素，并设置其样式
element:focus	匹配获得当前焦点的元素	input:focus{ background-color: yellow;}	选择获得焦点的输入字段，并设置其样式
element:lang(language)	:lang 选择器用于选取带有以指定值开头的 lang 属性的元素	p:lang(en){ background: yellow;}	选择带有以 "en" 开头的 lang 属性值的每个 <p> 元素，并设置其样式
element:enabled	匹配每个已启用的元素（大多用在表单元素上）	input[type="text"]:enabled{ background-color: #ff0000;}	为所有 type="text" 的已启用的 input 元素设置背景色
element:disabled	匹配每个被禁用的元素（大多用在表单元素上）	input[type="text"]:disabled{ background-color: #dddddd;}	为所有 type="text" 的被禁用的 input 元素设置背景色
element:checked	匹配每个已被选中的 input 元素， 只用于单选按钮radio和复选框checkBox（只在 Opera 中正确地工作）	input:checked{ background-color: #ff0000;}	为所有被选中的 input 元素设置背景色
element::selection	匹配被用户选取的元素部分 , IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器;Firefox 支持替代的 ::-moz-selection（只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline）	::selection{color: #ff0000;} ::-moz-selection{color: #ff0000;}	使被选中的文本成为红色
element:root	匹配文档的根元素，对于HTML文档，就是HTML元素	:root{ background: #ff0000;}	设置 HTML 文档的背景色
element:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1	p:nth-child(2){background: #ff0000;}	规定属于其父元素的第二个子元素的每个 p 的背景色
element:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1	p:nth-last-child(2){background: #ff0000;}	规定属于其父元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数
element:nth-of-type(n)	匹配属于其父元素的第 N 个子元素，与:nth-child()作用类似，不论元素的类型，但是仅匹配使用同种标签的元素	p:nth-of-type(2){background:#ff0000;}	设置属于其父元素的第二个 p 元素 的背景色
element:nth-last-of-type(n)	匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数，与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素	p:nth-last-of-type(2){background: #ff0000;}	规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数
element:last-child	匹配父元素的最后一个子元素的每个元素，等同于:nth-last-child(1)	p:last-child{ background: #ff0000; }	指定属于其父元素的最后一个子元素的 p 元素的背景色
element:first-of-type	匹配父元素下使用同种标签的第一个子元素的每个元素，等同于:nth-of-type(1)	p:first-of-type{background: #ff0000;}	指定父元素的首个 p 元素的背景色
element:last-of-type	匹配父元素下使用同种标签的最后一个子元素的每个元素，等同于:nth-last-of-type(1)	p:last-of-type{background:#ff0000;}	指定父元素的最后一个 p 元素的背景色
element:only-child	匹配属于其父元素的唯一子元素的每个元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)	p:only-child{background:#ff0000;}	规定属于其父元素的唯一子元素的每个 p 元素
element:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)	p:only-of-type{ background:#ff0000;}	指定属于父元素的特定类型的唯一子元素的每个 p 元素
element:empty	匹配一个不包含任何子元素的元素， 文本节点也被看做子元素	p:empty{ background:#ff0000;}	指定空的 p 元素的背景色

n 可以是数字、关键词或公式

伪元素选择器

选择器	含义	例子	例子描述
element::first-line	匹配元素内容的第一行	p::first-line{ background-color: yellow;}	选择每个 <p> 元素的首行，并为其设置样式
element::first-letter	匹配元素内容的第一个字母	p:first-letter{ font-size: 200%;color: #8A2BE2;}	选择每个 <p> 元素的首字母，并为其设置样式
element::before	在元素之前插入生成的内容	p:before{ content: "台词：";}	在每个 <p> 元素的内容之前插入新内容
element::after	在元素之后插入生成的内容	p:after{ content:"台词：";}	在每个 <p> 元素的内容之后插入新内容

• 更多详细的选择器可以参考 MDN

选择器的优先级

基本规则是：
　　行内样式 > id样式 > class样式 > 标签名样式

css样式的简单权重级别由高到低排列：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器

复杂场景下优先级的计算

复杂场景下将选择器分为四个级别通过各级别的出现次数决定。
四个级别分别为：

1. 行内选择符
2. ID选择符
3. 类别选择符( 类、属性选择器和伪类选择器 )
4. 元素选择符（标签选择器、伪元素）

优先级的算法：

• 每个规则对应一个初始"四位数"：0、0、0、0
• 若是 行内选择符，则加1、0、0、0
• 若是 ID选择符，则加0、1、0、0
• 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
• 若是 元素选择符/伪元素选择符，则分别加0、0、0、1

将每条规则中，选择符对应的数相加后得到的“四位数”，从左到右进行比较，大的优先级更高。 优先级相同时，采用就近原则，即最后出现的样式。

下面我们通过几个实例来看下这个CSS 选择器的权重到底是如何计算的
* { } 0,0,0,0
p { } 0,0,0,1
a:hover{ } 0,0,1,1
ul li { }0,0,0,2
ul ol+li { }0,0,0,3