一、选择器
1、ID选择器：
语法：
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则：
*#intro {font-weight:bold;}
#intro {font-weight:bold;}
2、类选择器：
语法：
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：
*.important {color:red;}
.important {color:red;}
3、元素选择器：
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
例如：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
4、属性选择器：
属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
与例子4不同，我们还可以对属性值进行子串匹配。
规则如下：
| 类型 | 描述 |
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
a[href*="w3school.com.cn"] {color: red;}
5、后代选择器：
以父元素为范围选择后代元素。
例如：
如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
6、子元素选择器：
以父元素为范围选择子元素。
例如：
如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
7、相邻兄弟选择器：
例如：
如果要设置紧接在 h1 元素后出现的段落字体为红色，可以这样写：
h1 + p {margin-top:50px;}
二、选择器的优先级
我们知道择器指向的越准确，它的优先级就越高。
故，通常如下分配权值（权值越大优先级越高）。
| 选择器类型 | 权值 |
| !important | [1,0,0,0] |
| ID选择器 | [0,1,0,0] |
| 类选择器 | [0,0,1,0] |
| 元素选择器 | [0,0,0,1] |
| 属性选择器 | [0,0,1,0] |
复合选择器的权值：
例：
#example em{color:red;}
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
【注：“内联样式表的权值”仅小于!important，因为它是一路ID组合出来的。】
三、选择器分组：
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
