概述
CSS 选择器 是 CSS 规则的一部分，用于匹配文档中的元素。匹配的元素将会应用规则指定的样式。
提示：这里有一个关于选择器的引导学习网站，供练习使用，点击前往 >>>
基础选择器 *
通用选择器
在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。
* { magrin: 0; padding: 0;}
备注： 不推荐使用通配选择器，因为它是性能最低的一个 CSS 选择器
类型选择器
CSS 类型选择器 通过节点名称匹配元素。换句话说，它选择一个文件中所有给定类型的元素。
/* 所有 <a> 元素。*/
a {
color: red;
}
类选择器
CSS 类选择器根据 class 属性的内容匹配元素。
.box { width: 300px; height: 300px; background-color: red; }
p.des { text-indent: 2em; color: blue; }
注意：由于类名可以被任意多的标签元素使用，因此当你需要为特定标签类名设置样式的时候，可以在
.之前指定标签名，这样就可以选中你要设置的对应的标签名中拥有该 class 的元素了，如上述示例中的 “p.des { … }” 即表示选择所有 p 标签中类名为des的元素。
ID 选择器
CSS ID 选择器会根据该元素的 id 属性中的内容匹配元素。为了使该元素被选中，它的 id 属性必须与选择器中给出的值完全匹配。
#box { width: 300px; height: 300px; background-color: red; }
#des { text-indent: 2em; color: blue; }
属性选择器
CSS 属性选择器匹配那些具有特定属性或属性值的元素。
[attr] {
....
}
该选择器的定义方式如下：
[attr]：表示带有以 attr 命名的属性的元素[attr = val]：表示带有以 attr 命名的属性，且属性值为 value 的元素。[attr ~= val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。[attr |= val]：表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀开头。[attr ^= val]：表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。[attr $= val]：表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。[attr *= val]：表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
分组选择器
选择器列表
CSS 选择器列表（,）选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。
<a href="javascript:;">超链接</a>
<div>布局标签</div>
<span>文本标签</span>
<p>段落标签</p>
a, div, span, p { font-size: 20px; }
div, p { margin: 0; padding: 0; }
组合器
后代组合器
后代组合器（通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为 后代选择器。
<div class="container">
<article>
<h1>Napoléon Bonaparte</h1>
<p>Adversity is the midwife of genius.</p>
</article>
</div>
/*index.css*/
.container article { text-align: center; }
.container h1 { color: #000000; }
.container p { color: #008800; }
子组合器
子组合器（>）被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。
<header>
<img src="images/logo.png" alt="logo" />
<nav>
<ul class="menu-list">
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">科技</a></li>
<li><a href="javascript:;">社会</a></li>
</ul>
</nav>
</header>
/*index.css*/
header > img { width: 80px; height: 30px; }
header > nav > ul.menu-list { list-style: none; }
后续兄弟选择器
后续兄弟选择器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。
/* 在任意图像后的兄弟段落 */
img ~ p {
color: red;
}
接续兄弟组合器
接续兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
/* 图片后面紧跟着的段落将被选中 */
img + p {
font-weight: bold;
}
