2.3　元素选择器

元素选择器包括标签选择器、类选择器、ID选择器和通配选择器。

2.3.1　标签选择器

标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。

  • 　优点：使用简单，直接引用，不需要为标签添加属性。
  • 　缺点：匹配的范围过大，精度不够。

因此，一般常用标签选择器重置各个标签的默认样式。

【示例】下面的示例统一定义网页中段落文本的样式为：段落内文本字体大小为12像素，字体颜色为红色。实现该效果，可以考虑选用标签选择器定义如下样式。

2.3.2　类选择器

类选择器以点号（.）为前缀，后面是一个类名。应用方法：在标签中定义class属性，然后设置属性值为类选择器的名称。

  • 　优点：能够为不同标签定义相同样式；使用灵活，可以为同一个标签定义多个类样式。
  • 　缺点：需要为标签定义class属性，影响文档结构，操作相对麻烦。

【示例】下面的示例演示了如何在对象中应用多个样式类。

第1步，新建HTML5文档，保存为test.html。

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。

第3步，在<style>标签内输入下面的样式代码，定义3个类样式：red、underline和italic。

第4步，在段落文本中分别引用这些类，其中第2段文本标签引用了3个类样式，演示效果如图2.3所示。

    <p class="underline">问君能有几多愁，恰似一江春水向东流。</p>
    <p class="red italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
    <p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>

图2.3　多类应用效果

2.3.3　ID选择器

ID选择器以井号（#）为前缀，后面是一个ID名。应用方法：在标签中定义id属性，然后设置属性值为ID选择器的名称。

  • 　优点：精准匹配。
  • 　缺点：需要为标签定义id属性，影响文档结构，相对于类选择器，缺乏灵活性。

【示例】下面的示例演示了如何在文档中应用ID选择器。

第1步，启动Dreamweaver，新建一个网页，在<body>标签内输入<div>标签。

    <div id="box">问君能有几多愁，恰似一江春水向东流。</div>

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。

第3步，输入下面的样式代码，为id属性值为box的元素定义固定的宽和高，并设置背景图像，以及边框和内边距大小。

第4步，在浏览器中预览，效果如图2.4所示。

图2.4　ID选择器的应用

提示：不管是类选择器，还是ID选择器，都可以指定一个限定标签名，用于限定它们的应用范围。例如，针对上面的示例，在ID选择器前面增加一个div标签，这样div#box选择器的优先级会大于#box选择器的优先级。在同等条件下，浏览器会优先解析div#box选择器定义的样式。对于类选择器，也可以使用这种方式限制类选择器的应用范围，并增加其优先级。

2.3.4　通配选择器

通配选择器使用星号（*）表示，用来匹配文档中的所有标签。

【示例】使用下面的样式可以清除所有标签的边距。

    * { margin: 0; padding: 0; }
上一章目录下一章