CSS选择器

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

标签选择器

类选择器

ID选择器

伪类选择器

基于关系的选择器

标签选择器

以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