css 选择器：
派生选择器、id选择器、类选择器、属性选择器
派生选择器：
1、后代选择器（包含选择器）
eg： 以下两个h1里的所有em的字体颜色都改为red
h1 em { font-color: red; } <h1> <em>asdas</em> </h1> <h1> <span> <em>sdsd</em> </span> </h1>
注意： 后代选择器，两个元素之间的层次间隔可以是无限的
2、子元素选择器 （直接子类）
子选择器使用了大于号（子结合符）。
eg：把第一条 h1 下面的em元素颜色变为red，但是第二条 h1 中的 em 不受影响
h1 > em { font-color: red; } <h1> <em>asdas</em> </h1> #第一条 <h1> <span> <em>sdsd</em> </span> </h1> #第二条
注意： 子结合符两边可以有空白符，这是可选的； 直接子元素才起作用
3、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
eg: ul中的第二个、第三个li元素变为red， ol中的第二个、第三个变为red
li + li { font-color: red } <div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
注意： 用一个结合符只能选择两个相邻兄弟中的第二个元素
id选择器：
1、id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
2、id 选择器以 "#" 来定义。
3、id 选择器和派生选择器
id 选择器常常用于建立派生选择器
即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次
#red {color:red;} <p id="red">这个段落是红色。</p>
类选择器：
1、类选择器以一个点号显示
2、和 id 一样，class 也可被用作派生选择器
3、元素也可以基于它们的类而被选择
eg: 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
.center {text-align: center} <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
属性选择器：
注意： 只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
CSS 选择器参考手册
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |