上一讲，《初识音画帖代码结构》，我们讲到了CSS的 id选择器，该选择器由 #+名称 表示，然后用花括号 {} 将描述元素属性值的语句组织起来，例如，#mydiv { ... }，对应的HTML元素则使用 id="mydiv" 表示这个元素使用 #mydiv 选择器制定的样式来渲染（呈现）自己。这就是CSS和HTML标签（元素）的对应关系。我们需要注意的是，相同一个页面里，HTML标签的 id 是唯一的，就像我们每一个人的身份证（id）一样不能有雷同。下面的HTML代码，第二个 div 是非法的，因为它的 id 第一个 div 已经使用：

<div id="tiezi">第一个div合法</div>
<div id="tiezi">第二个div非法</div>

CSS选择器除了 id选择器 外，常用的还有类选择器，术语叫做 class选择器，它以点号 . 开头，后面紧跟上名称，然后也是用花括号组织HTML元素的属性代码，试看：

<style>
.textRed {
	color: red;
}
</style>

<div class="textRed">我是div标签</div>
<p class="textRed">我是p标签</p>

上面，CSS代码仅一个选择器，.textRed，它就是class选择器，用来规定一个类别的标签的样式，它定义了文本颜色（术语称为前景色）为红色（red）。接着，HTML代码中有两个标签，一个是div标签，另一个是p标签，它们都通过 class="textRed" 表明自己使用 .textRed 这个类选择器来设定自己的样式。结果如下：

我是div标签

我是p标签

id选择器也好，class选择器也好，它们的名称都是我们自命名的，命名规则没有严格要求，一般来说在兼顾合法（比如不能用数字开头，但可以使用中文命名）的基础上尽可能地语义化，以便修改、维护代码时能一目了然、轻松自如。而有些选择器我们不能自由命名，它们的名称是固定的，直接使用HTML的元素名称命名，术语称为元素选择器，做帖时用到的不多，但有必要了解一下。看代码：

<style>
p {
	font-size: 20px; /* 字体大小 */
	color: #000; /* 前景色 */
}

video {
	position: absolute; /* 定位 */
	width: 100%; /* 宽度 */
	height: 100%; /* 高度 */
}
</style>

这里，定义了两个选择器的样式，一个是 p选择器，将对应HTML的p标签即段落标签，另一个是 video选择器，将对应于 video标签即视频标签；p标签和视频标签是HTML固有的标签，还有很多，例如 div、audio、img 等等等等。这样定义之后，默认情况下，页面所有的 p标签 和 video标签 将使用各自的CSS选择器样式来呈现自己。但是，元素选择器可以被 id选择器 和 class 选择器更改样式，就是说，以 p标签 为例，如果我们还定义了一个 #myp 或 .myp 选择器，那么，当 p标签 使用了 id="myp" 或 class="myp"，这个p标签将优先使用 #myp 或 .myp 来渲染自己，具体是，重叠的属性，使用 #myp 或 .myp 选择器定义的样式（p选择器定义的属性被覆盖），不重叠的部分继续使用 p选择器 定义的属性样式——CSS有这么一个特性：后面定义的属性会覆盖前面定义的属性，还有，通用设置的属性会被特定设置的属性覆盖。

CSS选择器的内容还有很多，分法也很细致，不过我们暂时用不到的我们先不介绍，将来需要用了我们再去学习也不迟。

本讲主要讲解常用的CSS选择器以及它们和HTML标签的对应关系，理解这些将有助于音画帖的制作。

返回目录