1、元素选择器
最常见的 CSS 选择器莫过于元素选择器，换言之，HTML 文档中的元素是最基本的选择器
body {color:black;}
h1 {color:gray;}
p {color:white;}2、继承
根据 CSS 规则，子元素将会继承最高级元素所拥有的属性。例如，如果在 body 元素中定义了样式，那么在它的子元素中，如 <h1>、<p>，也会拥有相同的样式，如果想要改变子元素的样式，则需要重新定义子元素的样式以覆盖继承的样式
3、选择器分组
现在考虑这样一个问题，假如我们需要让所有的标题都变成蓝色，那么我们可以像下面这样定义样式表：
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}虽然这样的定义清晰易懂，但是也未免过于繁琐，所以我们可以将其合并写成下面的形式
h1,h2,h3,h4,h5,h6 {color: green;}这称为选择器分组，可以把享有相同声明的元素放在一起，从而使得所有的定义清晰简洁
4、声明分组
既然我们可以对选择器进行分组，那么也同样可以对声明进行分组
还是考虑这样一个问题，假如我们需要让段落背景颜色为黑色，字体颜色为白色，一个简单声明如下：
p {background:black;}
p {color:blue;}这样可以吗？当然可以，但是当声明增多时，也同样过于繁琐了，所以我们可以将同一个元素的声明合并在一起，此时要注意不同属性之间需要使用分号（ ; ）分隔
p {
background:black;
color:blue;
}5、后代选择器
后代选择器可以帮助我们选择某元素的所有后代元素，其语法规则如下（注意和选择器分组的区别）：
tag1 tag2 {
property: value;
...
}上面语法可以理解为只对 tag1 中的后代元素 tag2 起作用，而对一般的 tag2 不起作用，例如，下面语法定义为在 <p> 元素中的 <em> 元素变成蓝色，而对一般的 <em> 元素不起作用
p em {
color: blue;
}一个使用了上面 CSS 规则的 HTML 代码如下：
<h1>我是标题，<em>没有变成蓝色</em></h1>
<p>我是段落，<em>变成蓝色</em></p>6、子元素选择器
与后代选择器相比，子元素选择器可以帮助我们缩小范围，只某一元素的子元素起作用，而非后代元素，其语法规则如下：
tag1 > tag2 {
property: value;
...
}上面语法可以理解为只对 tag1 中的子元素 tag2 起作用，而对其它的 tag2 不起作用，例如，下面语法定义为 <p> 元素中的子元素 <strong> 变成红色，而其它 <strong> 元素不受影响
p > strong {
color:red;
}一个使用了上面 CSS 规则的 HTML 代码如下：
<p>
这是段落，<strong>变成红色</strong>
这是段落，<em>这是强调，<strong>没有变成红色</strong></em>
</p>7、相邻兄弟选择器
如果需要选择紧接在另一个元素之后的元素，而且二者有相同的父元素，那么可以使用相邻兄弟选择器，其语法规则如下：
tag1 + tag2 {
property: value;
...
}上面语法可以理解为只对紧接在 tag1 中的 tag2 元素起作用，而对其它的 tag2 不起作用，例如，下面语法定义为紧接 <h1> 元素中的 <p> 变成绿色，而其它的 <p> 元素不受影响
h1 + p {
color:green;
}一个使用了上面 CSS 规则的 HTML 代码如下：
<h1>这是一个标题</h1>
<p>这是一个段落，变成绿色</p>
<p>这是一个段落，没有变成绿色</p>8、类选择器
类选择器允许以一种独立于文档元素的方式指定样式，但是只有在 HTML 文档中指定类名称后，才可以在 CSS 中使用类选择器，例如
<h1 class="important">这是一个标题</h1>
<p class="important">这是一个段落</p>然后我们可以在 CSS 中使用类选择器给不同命名的元素指定不同的样式，其语法规定需要在类名前加上一个点号（ . ），然后配合通配选择器（ * ）使用，但是也可以省略通配选择器，它们效果是一样的
*.important {font-style:italic;}
/* 这样，上面的 HTML 代码中 <h1> 元素和 <p> 元素中的内容都会变成斜体 */当然，我们也可以结合元素选择器使用，给规定了类名的特定元素指定样式
p.important {font-style:italic;}
/* 这样，<h1> 元素中的内容不会变成斜体，而 <p> 元素中的内容将会变成斜体 */如果有一个元素定义了多个类名又该怎么处理呢？
<h1 class="important">这是一个标题</h1>
<p class="important warning">这是一个段落</p>没关系，只需要使用连续的点号和类名即可匹配，但是要注意此时仅可选择同时包含这些类名的元素
*.important.warning {font-style:italic;}
/* 这样，<h1> 元素中的内容不会变成斜体，而 <p> 元素中的内容将会变成斜体 */9、ID 选择器
同样的，ID 选择器也允许以一种独立于文档元素的方式来指定样式，相比于类选择器有以下区别：
- 在 HTML 中指定 ID 时，不能重复使用，也就是说一个 ID 只能使用一次
- 在 CSS 中选择元素时，ID 选择器需要将在类选择器中使用的点号（ . ）替换成井号（ # ）
- 在 CSS 中选择元素时，不能使用 ID 词列表，因为 ID 属性不允许有以空格分隔的词列表
例如，在 HTML 文档中定义 ID 如下：
<p id="important">这是一个段落</p>那么，可以在 CSS 中定义该元素样式如下：
p#important {font-weight:bold;}10、属性选择器
属性选择器允许根据元素的属性和属性值来选择元素，其基本语法如下：
tag[attribute1="value"][...] {
property: value;
...
}其中，value 可以指定，也可以省略，省略时表示选择带有 attribute 属性的 tag 标签，指定时表示选择带有 attribute 属性且其值为 value 的 tag 标签
a[href] {color:red;}注意，上面使用 = 是表示完全匹配，即值必须完全一致时才匹配成功，此外还有其它匹配方法
- ~=：匹配属性值中包含指定词汇的元素
- |=：匹配属性值中包含以指定词汇开头的元素
- ^=：匹配属性值以指定值开头的每个元素
- $=：匹配属性值以指定值结尾的每个元素
- *=：匹配属性值中包含指定值的每个元素
11、伪类
伪类可以向某些选择器添加特殊的效果，常用于配合 CSS 类使用，基本语法如下：
selector.class:pseudo-class {
property: value;
...
}常见的伪类有：
| 伪类 | 描述 |
|---|---|
| hover | 当鼠标悬浮在元素上方时，向该元素添加样式 |
| actice | 当元素被激活时，向其添加样式 |
| link | 向未被访问的链接添加样式 |
| visited | 向已被访问的链接添加样式 |
| first-child | 向元素的第一个子元素添加样式 |
| lang | 向带有指定 lang 属性的元素添加样式 |
一个例子如下：
a:link {color: red} /* 未访问的链接显示红色 */
a:visited {color: green} /* 已访问的链接显示绿色 */
a:hover {color: blue} /* 鼠标移动到链接上显示蓝色 */
a:active {color: yellow} /* 选定的链接显示黄色 */注意 ：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后
12、伪元素
同样的，伪元素也可以向某些选择器设置特殊的效果，其基本语法如下：
selector.class:pseudo-element {
property: value;
...
}常见的伪元素有：
| 伪元素 | 描述 |
|---|---|
| first-letter | 向文本的第一个字母添加特殊样式 |
| first-line | 向文本的第一个行添加特殊样式 |
| before | 在元素之前添加特殊样式 |
| after | 在元素之后添加特殊样式 |
一个例子如下：
p:first-letter {font-size: xx-large;}注意 ：first-letter 伪元素只适用于块级元素