类选择器
类选择器
类选择器 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 1 节课。
为什么使用类选择器
您好：
我们学习到了 class 选择器，这是 CSS 中最重要的问题之一。
我们了解 class 选择器，因为到目前为止已经频繁使用它。
在本课中，让我们巩固所学知识，并了解它相较于其他选择器的优势。
类选择器语法
那么，让我们开始吧。
我们使用点号（.）选择器来定义类类型选择器。下面定义了一个名为 my-class 的类选择器，并为其传入了 font-size: 10px 样式。
.my-class {
font-size: 10px;
}
我们还可以为类选择器定义多个样式。
.my-class {
font-size: 10px;
}
多个选择器
我们可以为同一个元素指定多个类。
在下面的示例中，定义了两个名为 el1 和 el2 的类选择器。
可以在由 p 标签创建的元素的 class 属性中添加两个或更多类，类名之间用空格分隔。
您可以在预览部分看到，两个类的样式会同时反映到该元素上。
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>那么，为什么我们应该选择类选择器，而不是标签选择器和 ID 选择器？
那么，为什么我们应该选择类选择器，而不是标签选择器和 ID 选择器？
使用标签选择器时，可能会产生不需要的结果，因为它会影响使用该标签创建的所有元素。因此，通常只有在所有元素都应具备某项共同特征时，我们才会使用标签选择器。
例如，如果我们希望某个元素的字体都设置为 “Lato”，可以按如下方式进行定义。
a{
font-family: Lato,sans-serif
}那么，为什么我们应该选择类选择器，而不是标签选择器和 ID 选择器？2
我们可以使用 元素专属 的 ID 选择器进行定义。
但是，由于我们的样式定义只对一个元素有效，如果还想让另一个元素显示相同的属性，就必须重新编写代码。
因为在同一个 HTML 文档中，只能有一个元素使用相同的 ID。
CSS 特异性
现在，让我们学习 CSS 特异性的概念。
为了更好地理解这个主题，我们再次设置一个问题，并在解决问题的过程中学习这一概念。
CSS 特异性 2
在下面的示例中，
我们为 p 标签定义了样式。
我们使用名为 .first 的类选择器定义了样式。
两个选择器都选中了 HTML 文档中的同一个元素。
两个选择器都为同一个颜色属性定义了替代样式。在这种情况下，就会发生冲突。
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSS 特异性 3
查看示例时，根据我们之前的知识，可能会认为颜色将是红色。
因为层叠概念告诉我们，代码顺序中最后出现的定义会生效。
不过，这里有一个小细节。 只有当它们的特异性相同时，最后出现的代码才会生效。
特异性选择器的评估结果体现了该选择器对相关元素的重要程度。
无论它在代码中的顺序如何，具有较高特异性等级的定义都会由浏览器进行评估。
警告
类选择器比元素选择器具有更高的特异性。因此，它的特异性等级也更高。
选择器特异性
找出哪个选择器的特异性更高，其实非常简单。
由于一个元素只能分配一个 ID，并且网页中每个 ID 只能使用一次，所以我们预计 ID 选择器具有最高优先级。
另一方面，类选择器的特异性可以高于标签选择器，因为它选择的是比标签更具体的元素组。
在下面的示例中，三个不同的选择器选中了同一个元素，我们将看到 ID 选择器会生效。
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>特异性计算工具
您可以通过此链接访问在线特异性计算器。
特异性何时重要
那么，我必须一直使用这些计算方法吗？
当然不必。 只要我们按照规范编写代码，就不会发生冲突。
因此，您不必一直进行数学计算；但遇到问题时，可能需要利用这些信息来解决问题。
恭喜
恭喜您。 🥳🥳🥳
您已经完成了类选择器和 CSS 特异性课程。
下一部分中，我们将学习选择器类型。
您可以点击进入下一部分继续学习。
常见问题解答
「类选择器」课时是免费的吗？
是的 — 「类选择器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 1 节课。
「类选择器」这节课中我会学到什么？
类选择器 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「类选择器」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。