3.3 CSS选择器

3.3  CSS选择器

在CSS中，选择器是一种模式，即用于选择元素样式的模式。

CSS可以对HTML元素样式进行分别设置，例如，将<p>元素设成红色、<h1>元素设成绿色，通过CSS选择器能够选对元素进筛选，进而设置不同的样式。

根据选择器的作用将CSS中的选择器划分为很多（40+）类，下面只介绍常用的几种。

1、选择器类型

（1）元素选择器，通常就是HTML的元素，在W3C标准中，元素选择器又称为类型选择器（type selector）。例如：

        <style type="text/css">

                      /*选择h2元素应用下面样式*/

                    h2 {color:red; font-style:italic;}

               /*选择img元素应用下面样式*/

               img {width:200px;}

        </style>

（2）类选择器，语法格式为".类选择器名"，以一个点号来标明类选择器。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。为了将类选择器的样式与元素关联，必须将class指定为一个适当的类选择器名。同一个页面多个元素可以使用相同的类选择器名。例如：

    .myfont {color:red; font-style:italic;}

因此，多个不同元素的class属性均可取值为“myfont”来使用该样式。

（3）ID选择器，允许以一种独立于文档元素的方式来指定样式。通过设置ID属性，然后根据其属性值来应用样式，语法格式为"#id"，以一个#号来标明ID选择器。例如：

    #identifier {color:blue;}

但是，同一个页面不能出现相同的ID名，因为网页中元素的ID值是唯一的。因此，使用ID选择器只能为网页中的某一个元素设置样式。

（4）后代选择器，又称包含选择器，根据元素之间的嵌套关系选择元素，语法格式为：

    "parents descendant"

注意，祖先元素和后代元素之间用空格分隔。例如,嵌套在p元素内的img元素（不一定是子元素）的宽度是120px可设置为：

    p img {width:120px;}

（5）子选择器，根据元素之间的嵌套关系选择元素，但是只包含子元素，语法格式为：

    "parent>child"

例如：

    p>img {width:120px;} 

只对p的子元素img有效，对p的孙子以下的后代元素无效。

（6）交集选择器，将多个选择器联合使用，取交集，语法格式为：

   "p.special"

例如：

    p.special {color:green;}

相当于给类选择器".special"添加了一个元素选择器的限制，它所定义的样式规则只能应用于class="special"为p元素，对其它情况无效。

（7）并集选择器，也就是选择器分组，将多个选择器联合使用以逗号分隔，取并集，其语法格式为：

   "h2, h3, p"

例如：

    p,h2,h3 {color:pink;font-size:16px;}

相当于分别对p,h2,h3各设置了一次{color:pink;font-size:16px;}。

（8）通用选择器，用"*"号代表所有元素。例如：

    * {

         padding:0;

         margin:0;

       }

它所设置的该样式将应用于网页的所有元素。

（9）匿名选择器，通过标签style属性直接引入CSS样式，也就是前面所学的内联样式。例如：

    <p style="color: red; font-style: italic;">

2、选择器优先级

在选择器类型部分介绍了9种常用的选择器。那么，如果我们将声明相同的多种选择器应用于同一个元素时会发生什么事情呢？比如，先定义样式为：

     p {color:yellow;}

     .special {color:blue;}

再编写HTML元素为：

            <p>只要功夫深，铁杵磨成针。</p>

            <p class="special">缓缓飘落的枫叶像思念！</p>

通过浏览器查看，会发现第2个p元素内容颜色为蓝色，这是由于选择器的优先级发挥作用的结果。

CSS优先级指CSS样式在浏览器中被解析的权重不同。它分为以下几种情况。

（1）通常，不同选择器被赋予不同优先级权重。内联样式（匿名选择器）的权值最高，置为 1000；id选择器的权值置为100；类选择器的权值置为10；HTML标签选择器的权值置为1，CSS选择器的优先级顺序如下图所示。

（2）如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。一般在多重样式（Multiple Styles）情况下（即<link>出现在<style>之前），样式优先级顺序如下图所示：

  需要说明的是，如果<link>引入的外部样式出现在<style>声明的样式之后，那么外部样式相当于在<style>之后定义，其优先级就会高于内部样式。所以，内部样式和外部样式的优先级由它们出现在网页文件中的先后顺序决定，大家在测试时，注意清空浏览器的缓存。

 （3）设置!important可以提升样式优先级，例如：

            p {

                color:red !important;

            }

（4）如果同时出现了上述3种情况，优先级顺序依次为：

!important > 匿名选择器（内联样式） > ID选择器 > 类选择器 > 元素（标签）选择器 > 通用选择器（*）>继承的样式 

在这种情况下，如果优先级一样该如何处理呢？

如果CSS优先级一样，书写顺序会影响最终的执行结果，后面的样式会覆盖前面的重复样式。可以类比其它编程语言中，给变量重复赋值情况，就容易理解最后所得的结果了。比如：

p {color:red;font-size:20px}

P {color:green;}

则应用上述样式的段落文字最终是20像素大小的绿色字体。

最后，各种情况的优先级规则总结如下：

（1）权值越大越优先；

（2）当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

（3）创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权，高于浏览器所设置的默认样式；

（4）继承的CSS样式权值小于后来指定的CSS样式；

（5）在同一组属性设置中标有“!important”规则的优先级最大。