4.2 基本选择器_HTML5+CSS3+JavaScript 从入门到项目实践（超值版）-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

基础选择器是编写CSS样式经常用到的选择器，它包括元素选择器、通配选择器、ID选择器、class选择器和群组选择器。下面分别介绍它们。

标签选择器又称为标记选择器，在W3C标准中，又称为类型选择器（type selector）。CSS标签选择器用来声明html标签采用哪种CSS样式，也就是重新定义了html标签。因此，每一个html标签的名称都可以作为相应的标签选择器的名称。

例如，p选择器就是用于声明页面中所有<p>标签的样式风格。同样，可以通过h1选择器来声明页面中所有的<h1>标签的CSS样式风格，具体代码如下：

以上CSS代码声明了html页面中所有<h1>标签，文字的颜色都采用红色，大小都为14px。

每一个CSS选择器都包括选择器、属性和值，其中属性和值可以为一个，也可以设置多个，从而实现对同一个标签声明多种样式风格的目的，如图4-1所示。

图4-1 标签选择器的结构

在这种格式中，既可以声明一个属性和值，也可以声明多个属性和值，根据具体情况而定。当然，还有另外一种常用的声明格式，如图4-2所示。

图4-2 标签选择器声明格式

在这种格式中，每一个声明都不带分号，而是在两个声明之间用分号隔开。同样，即可以声明一个属性和值，也可以声明多个属性和值。

注意：CSS对于所有的属性和值都有相对严格的要求。如果声明的属性或值不符合该属性的要求，则不能使该CSS语句生效。

通配选择器用一个“*”表示。单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。如让页面上的所有文本都为红色，代码如下：

      *{color:red;}

当然也可以选择某个元素下的所有元素。在与其他选择器结合使用时，通配选择器可以对特定元素的所有后代应用样式。如为div元素的所有后代添加一个红色背景，代码如下：

      div *{background: red;}

虽然通配选择器的功能强大，但是出于效率考虑，尽量少使用它。在各个浏览器中，每个元素上的默认边距都不一致，为了保证页面能够兼容多种浏览器，通常在Reset样式文件中，使用通配选择器进行重置，来覆盖浏览器的默认规则，代码如下：

      * { margin: 0; padding: 0; }

ID选择器允许以一种独立于文档元素的方式来指定样式，在某些方面，ID选择器类似于类选择器，不过也有一些重要差别。首先，ID选择器前面有一个#号，如图4-3所示。

图4-3 ID选择器结构示意图

例如：下面的两个ID选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

      #red {color:red;}
      #green {color:green;}

下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

      <p id="red">这个段落是红色。</p>
      <p id="green">这个段落是绿色。</p>

注意：id属性只能在每个HTML文档中出现一次。

【例4-1】（实例文件：ch04\Chap4.1.html）ID选择器。

相关的代码实例请参考Chap4.1.html文件，在IE浏览器中运行的结果如图4-4所示。可以看到标题以蓝色字体显示，大小为20px，段落内容以红色字体显示，大小为22px。

图4-4 ID选择器应用实例

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用，常用语法格式如下：

      .classValue {property:value}

classValue是选择器的名称，具体名称由CSS制定者自己命名。【例4-2】（实例文件：ch04\Chap4.2.html）class选择器。

相关的代码实例请参考Chap4.2.html文件，在IE浏览器中运行的结果如图4-5所示。

图4-5 类别选择器应用实例

群组选择器实际上是对CSS的一种简化写法，只不过把相同定义的不同选择器放在一起，用“,”分开，这样样式只需要编写一遍节，省了很多的代码。假果我们想要给<p>和<div>元素同时设置黄色背景，就可以使用群组选择器。

【例4-3】（实例文件：ch04\Chap4.3.html）群组选择器。

相关的代码实例请参考Chap4.3.html文件，在IE浏览器中运行的结果如图4-6所示。

图4-6 群组选择器

本周热推：