css中使用id和class 的不同

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的样例中，全部拥有 center 类的 HTML 元素均为居中。

在以下的 HTML 代码中，h1 和 p 元素都有 center 类。

这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1><p class="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>

转载于:https://www.cnblogs.com/brucemengbm/p/6934181.html