3.2.1 元素选择器
在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式规定。元素选择器又称为类型选择器，可以用于匹配HTML文档中某一个元素类型的所有元素。
例如，匹配所有的段落元素<p>，并将其背景颜色声明为灰色：
p{background:gray}
3.2.2 ID选择器
ID选择器使用指定的id名称匹配元素。如果需要为特定的某个元素进行样式设置，可以为其添加一个自定义的id名称，然后根据id名称进行匹配。
ID选择器和元素选择器语法结构类似，但是声明时需要在id名称前面加#号。其语法规则如下：
# id名称{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
例如，为某个段落元素<p>添加id="test"：
<p id="test">这是一个段落</p>
然后匹配上述id="test"的段落元素<p>，并将其字体颜色声明为红色：
#test{color:red}
3.2.3 类选择器
类选择器可以将不同的元素定义为共同的样式。类选择器在声明时需要在前面加“.”号，为了和指定的元素关联使用，需要自定义一个class名称。
其语法规则如下：
.class名称{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
- 例如，设置一个类选择器用于设置字体为红色：
.red{color:red}
将其使用在不同的元素上，可以显示统一的效果：
<h1 class="red">这是标题，字体颜色是红色</h1>
<p class="red">这是段落，字体颜色也是红色</p>
类选择器也可以将相同的元素定义为不同的样式。
例如，设置两个类选择器，分别用于设置字体为红色和蓝色：
.red{color:red}
.blue{color:blue}
将其使用在相同的段落元素<p>中，可以显示不同的样式效果：
<p class="red">这是段落1，字体颜色是红色</p>
<p class="blue">这是段落2，字体颜色是蓝色</p>
类选择器也可以为同一个元素设置多个样式。
例如，设置两个类选择器，分别用于设置字体为红色和设置背景颜色为蓝色：
.red{color:red}
.bgblue{background-color:blue}
将其使用在同一个段落元素<p>中，可以同时应用这两种样式效果：
<p class="red bgblue">本段落的字体颜色是红色，背景颜色是蓝色</p>
3.2.4 属性选择器
从CSS2开始引入了属性选择器，属性选择器允许基于元素所拥有的属性进行匹配。
其语法规则如下：
元素名称[元素属性]{属性名称1:属性值1; 属性名称2:属性值2; ... 属性名称N:属性值N }
例如，只对带有href属性的超链接元素<a>设置CSS样式：
a[href]{
color: red;
}
上述代码表示将所有带有href属性的超链接元素<a>设置字体颜色为红色。
也可以根据具体的属性值进行CSS样式设置，例如：
a[href= "http://www.baidu.com"]{color: red;
}
上述代码表示将href属性值为http://www.baidu.com的超链接设置为红色字体样式。
如果不确定属性值的完整内容，可以使用[attribute~=value]的格式查找元素，表示在属性值中包含value关键词。例如：
a[href~="baidu"]{color: red;
}
上述代码表示将所有href属性值中包含baidu字样的超链接设置为红色字体样式。
还可以使用[attribute|=value]的格式查找元素，表示属性值中以单词value开头。例如：
img[alt|="flower"]{border:1px solid red;
}
上述代码表示为所有alt属性值以flower字样开头的图像元素设置1像素宽的红色实线边框效果。
3.2.5其他常用选择器
伪类选择器（Pseudo-Class Selectors）： 伪类选择器用于向特定元素添加特殊效果，常见的伪类包括 :hover（鼠标悬停时）、:active（元素被激活时）、:first-child（作为其父元素的第一个子元素时）等。例如：
a:hover { color: red; }上述代码将会选择所有超链接元素（<a>）在鼠标悬停时，将其文字颜色设置为红色。
伪元素选择器（Pseudo-Element Selectors）： 伪元素选择器允许在文档中的某个位置插入生成的内容，常见的伪元素包括 ::before（在元素内容之前插入内容）、::after（在元素内容之后插入内容）等。例如：
p::before { content: "前缀 "; }上述代码将会选中所有段落元素（<p>）并在其内容前插入"前缀 "。
组合选择器（Combinators）： 组合选择器允许选择特定关系下的元素。例如：
div p { color: blue; }上述代码将会选中所有 <p> 元素内部的所有 <div> 元素，并将其文字颜色设置为蓝色。
子元素选择器（Child Selector）： 子元素选择器（>）选择作为指定元素的直接子元素的元素。例如：
ul > li { list-style-type: square; }上述代码将会选中所有直接作为无序列表（<ul>）子元素的列表项（<li>），并将其列表样式设置为方块。
相邻兄弟选择器（Adjacent Sibling Selector）： 相邻兄弟选择器（+）选择紧接在另一个元素后的特定元素。例如：
h2 + p { margin-top: 0; }上述代码将会选中紧接在<h2>元素后面的<p>元素，并将其上边距设置为0。
