在 CSS 中,类选择器以一个点号显示:
.center
{text-align: center}
在上面的样例中,全部拥有 center 类的 HTML 元素均为居中。
在以下的 HTML 代码中,h1 和 p 元素都有 center 类。
这意味着两者都将遵守 ".center" 选择器中的规则。
<h1class="center"
> This heading will be center-aligned </h1> <pclass="center"
> This paragraph will also be center-aligned. </p>
CSS ID 选择器
在某些方面。ID 选择器类似于类选择器,只是也有一些重要区别。
语法
首先。ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看以下的规则:
*#intro {font-weight:bold;}
与类选择器一样,ID 选择器中能够忽略通配选择器。前面的样例也能够写作:
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个差别是 ID 选择器不引用 class 属性的值。毫无疑问,它要引用 id 属性中的值。
下面是一个实际 ID 选择器的样例:
<p id="intro">This is a paragraph of introduction.</p>
类选择器还是 ID 选择器?
在类选择器这一章中我们曾解说过,能够为随意多个元素指定类。
前一章中类名 important 被应用到 p 和 h1 元素,并且它还能够应用到很多其它元素。
差别 1:仅仅能在文档中使用一次
与类不同,在一个 HTML 文档中。ID 选择器会使用一次,并且仅一次。
差别 2:不能使用 ID 词列表
不同于类选择器。ID 选择器不能结合使用,由于 ID 属性不同意有以空格分隔的词列表。
差别 3:ID 能包括很多其它含义
类似于类,能够独立于元素来选择 ID。
有些情况下,您知道文档中会出现某个特定 ID 值,可是并不知道它会出如今哪个元素上。所以您想声明独立的 ID 选择器。比如。您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。
您仅仅知道每一个文档都会有这么一个最重要的内容,它可能在不论什么元素中。并且仅仅能出现一个。在这样的情况下,能够编写例如以下规则:
#mostImportant {color:red; background:yellow;}这个规则会与下面各个元素匹配(这些元素不能在同一个文档中同一时候出现,由于它们都有同样的 ID 值):
<h1 id="mostImportant">This is important!</h1> <em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul>