主要内容： 常见的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样式的简单权重级别由高到低排列：
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
复杂场景下优先级的计算
复杂场景下将选择器分为四个级别通过各级别的出现次数决定。
四个级别分别为：
- 行内选择符
- ID选择符
- 类别选择符( 类、属性选择器和伪类选择器 )
- 元素选择符（标签选择器、伪元素）
优先级的算法：
- 每个规则对应一个初始"四位数"：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
