3.2 CSS选择器

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 }

1. 例如，设置一个类选择器用于设置字体为红色：

.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。