- CSS3网页设计从入门到精通（微课精编版）
- 前端科技
- 959字
- 2021-03-26 03:49:42
2.2 元素选择器
元素选择器包括标签选择器、类选择器、ID选择器和通配选择器。
2.2.1 标签选择器
标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。
优点：使用简单，直接引用，不需要为标签添加属性。
缺点：匹配的范围过大，精度不够。
因此，一般常用标签选择器重置各个标签的默认样式。
【示例】下面示例统一定义网页中段落文本的样式为：段落内文本字体大小为12px，字体颜色为红色。实现该效果，可以考虑选用标签选择器定义如下样式。
2.2.2 类选择器
类选择器以点号（.）为前缀，后面是一个类名。应用方法：在标签中定义class属性，然后设置属性值为类选择器的名称。
优点：能够为不同标签定义相同样式；使用灵活，可以为同一个标签定义多个类样式。
缺点：需要为标签定义class属性，影响文档结构，操作相对麻烦。
【示例】下面示例演示如何在对象中应用多个样式类。
【操作步骤】
第1步，新建HTML5文档，保存为test.html。
第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第3步，在<style>标签内输入下面样式代码，定义3个类样式：red、underline和italic。
第4步，在段落文本中分别引用这些类，其中第2段文本标签引用了3个类，演示效果如图2.1所示。
图2.1 多类应用效果
2.2.3 ID选择器
ID选择器以井号（#）为前缀，后面是一个ID名。应用方法：在标签中定义id属性，然后设置属性值为ID选择器的名称。
优点：精准匹配。
缺点：需要为标签定义id属性，影响文档结构，相对于类选择器，缺乏灵活性。
【示例】下面示例演示如何在文档中应用ID选择器。
【操作步骤】
第1步，启动Dreamweaver，新建一个网页，在<body>标签内输入<div>标签。
<div id="box">问君能有几多愁，恰似一江春水向东流。</div>
第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第3步，输入下面样式代码，为该盒子定义固定宽和高，并设置背景图像，以及边框和内边距大小。
第4步，在浏览器中预览，效果如图2.2所示。
图2.2 ID选择器的应用
提示：不管是类选择器，还是ID选择器，都可以指定一个限定标签名，用于限定它们的应用范围。例如，针对上面示例，在ID选择器前面增加一个<div>标签，这样div#box选择器的优先级会高于#box选择器的优先级。在同等条件下，浏览器会优先解析div#box选择器定义的样式。对于类选择器，也可以使用这种方式限制其应用范围，并增加其优先级。
2.2.4 通配选择器
通配选择器使用星号（*）表示，用来匹配文档中所有标签。
【示例】使用下面样式可以清除所有标签的边距。
* {margin: 0; padding: 0;}