CSS选择器

CSS的选择器大致可以分为五类：

1. 标签选择器
2. 类选择器
3. ID选择器
4. 伪类选择器
5. 基于关系的选择器

标签选择器
以html标签作为规则的一类选择器。标签选择器在CSS的规范中也叫作：类型选择器（区别于类选择器）

div{color:red;} /*标签选择器*/

类选择器
html代码

<div class="class-selector"></div>

CSS代码

.class-selector{color:red;}

上面的是类选择器。通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定

Notice:文档中的多个元素可以拥有同一个类名。

ID选择器
通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时，ID选择器是以#开头的。

<p class="key" id="principal">#principal {  font-weight: bolder;}

伪类选择器
CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。

语法：selector:pseudo-class {  property: value;}伪类列表：    :link    :visited    :active    :hover    :focus    :first-child    :nth-child    :nth-last-child    :nth-of-type    :first-of-type    :last-of-type    :empty    :target    :checked    :enabled    :disabled

基于关系的选择器
CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。
常见的基于关系的选择器：

选择器 选择的元素 A E 任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) A > E 任何元素A的子元素 E:first-child 任何元素的第一个子元素E B + E 任何元素B的下一个兄弟元素E B ~ E B元素后面的拥有共同父元素的兄弟元素E