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