ID和Class的区别
ID 和Class之间的区别在于id是唯一的，而Class不是。
这意味着每个元素只能有一个 ID，并且每个页面只能有一个具有此 ID 的元素。
在多个元素上使用相同的 ID 时，代码不会通过验证。
但是由于Class不是唯一的，因此可以在多个元素上使用同一个Class，反之亦然，我们可以在同一个元素上使用多个Class。
在上一章中，我们学习了选择器。
现在我们将讨论经常用于设计网页元素样式的 id 和 class 选择器。
CSS 类选择器
当必须将相同的样式应用于同一网页上的多个 HTML 元素时，将使用class选择器。
在内部和外部样式表中，我们都使用点 (.) 作为class选择器。
Class选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>
在我们的示例中，类选择器在标题和段落中使用了两次。
如我们所见，我们将蓝色指定为类选择器 (class="blue")，并在 <head> 部分使用颜色属性 .blue {color: #1c87c9;} 声明其样式。
这意味着具有类选择器蓝色的元素将显示在#1c87c9 中。
在我们的示例中，标题和第三段是#1c87c9.
在我们的 HTML 在线编辑器中查看。
CSS id 选择器
ID 选择器是必须应用特定样式的 HTML 元素的唯一标识符。
它仅在网页上的单个 HTML 元素必须具有特定样式时使用。
在内部和外部样式表中，我们都使用哈希 (#) 作为 id 选择器。
ID 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>
如我们所见，我们将蓝色指定为第二段 (id="blue") 的 id 选择器，并在 <head> 部分使用颜色属性 #blue {color: #1c87c9;} 声明其样式。
这意味着具有 id 选择器 blue 的 HTML 元素将显示在 #1c87c9 中。
在我们的 HTML 在线编辑器中检查这段代码，看看第二段的颜色是 #1c87c9.
日期：2020-06-02 22:14:26 来源：oir作者：oir