CSS 选择器

CSS 选择器决定了后续规则将应用于哪些元素。

1. 核心选择器

选择器	解释
*	选中所有的元素
xxx	选中的元素必须是 xxx 类型元素。 即，<xxx>
.xxx	选中的元素的 class 属性的值必须 是/有 xxx 。 即，class="xxx ..."
#xxx	选中的元素的 id 属性的值必须是 xxx 。 即，id=xxx

2. 属性选择器

属性选择器是基于属性名及属性的值进行选择页面元素。

选择器	解释
[attr]	选中的元素必须具有 attr 属性。
[attr="val"]	选中的元素必须具有 attr 属性，且属性值为 val。
[attr^="val"]	选中的元素必须具有 attr 属性，且属性值是以 val 开头。
[attr$="val"]	选中的元素必须具有 attr 属性，且属性值是以 val 结尾。
[attr*="val"]	选中的元素必须具有 attr 属性，且属性值含有 val（可以有其他值）。

3. 选择器的复合使用

选择器的复合使用，从程序员的角度来看，就是以 与 和 或 的关系组合使用多个选择器，选择页面元素。

选择器的“与”关系：<选择器1><选择器2>，将两个选择器“紧挨”在一起，就是以 与 的关系使用选择器选择页面元素。其选择结果必定（必须）同时满足两个选择器。

注意，此处两个选择器间不能有空格。有空格则表达了另一种关系，不再是 与 的关系。

选择器的“或”关系：<选择器1>, <选择器2>，将两个选择器以逗号（,）分隔，就是以 或 的关系使用选择器选择页面元素。其选择结果只需满足两者其一即可。

注意，此处逗号后的空格可有可无。

4. 亲属关系选择器

亲属关系选择器会涉及到元素的层次结构。

选择器	解释
<选择器1> <选择器2>	选中的元素要满足 选择器 2 ， 并且，祖先要满足 选择器 1 。
<选择器1> > <选择器2>	选中的元素要满足 选择器 2 ， 并且，爸爸要满足 选择器 1 。
<选择器1> + <选择器2>	选中的元素要满足 选择器 2 ， 并且，最小的哥哥要满足 选择器 1 。
<选择器1> ~ <选择器2>	选中的元素要满足 选择器 2， 并且，哥哥要满足 选择器 1 。