嘿，欢迎回到边学边编码：HTML 和 CSS！今天，我们将深入探讨造型的世界。到目前为止，我们一直在直接设计元素的样式。但是，如果您有两个
元素并且希望每个元素看起来不同怎么办？输入 CSS 选择器！
元素选择器
您已经熟悉这些，但让我们回顾一下：
h1 {
字体大小：32px；
字体系列：Arial；
字体粗细：500；
}
此规则集针对所有
元素，设置其字体大小、系列和粗细。元素选择器非常适合大纲，例如为整个页面设置样式指南。但让我们面对现实吧，并非所有
标签都应该看起来相同。对于更具体的造型，我们需要加强我们的游戏！
类选择器
课程来拯救！想要两个
标签看起来不同吗？添加课程：
<p class="big red">这个文字又大又红。</p> <p class="small blue">此文本很小，呈蓝色。</p>
每个
标签都有两个类。在 CSS 中，使用 .:
定位这些类
.大{
字体大小：100px；
}
。小的 {
字体大小：9px；
}
。红色的 {
红色;
}
。蓝色的 {
颜色: 蓝色;
}
繁荣！应用样式。您可能会问，“为什么不将样式合并到更少的类中呢？”好问题！我喜欢保持课程的灵活性。你永远不知道什么时候你会想重复使用没有蓝色的小东西。
ID选择器
对于唯一元素，请使用 ID。看看这个：
<p id="name">我的名字是诺兰！</p>
谨慎使用 ID，每页仅使用一次。在 CSS 中使用 #:
定位它们
#name {
文本装饰：下划线；
}
简单吧？
风格冲突
现在，如果一个元素同时具有类和 ID 会怎样？像这样：
<p id="red" class="blue">我会是红色还是蓝色？</p>
会变红的！为什么？因为 ID 比类更具体。这是一个简单的例子：
<p id="red" class="underline">我的风格由三个规则集决定！</p>
p {
字体大小：12px；
颜色：黑色;
文本装饰：无；
}
.下划线{
文本装饰：下划线；
}
＃红色的 {
红色;
}
文字变成红色并带有下划线，字体大小为12px。 ID 胜过类，而类又会覆盖元素选择器。这种级联样式使您的页面看起来很优雅，无需重复代码。
挑战
是时候升级您的“关于我”页面了！这是你的使命：
- 使用元素选择器设置
、
和
的默认样式。
- 使用
标签在您的名字下添加标语，并使用 ID 对其进行样式设置。
- 使用类选择器让其他文本变得有趣。
尝试不同的风格，看看哪种规则获胜。你能找出原因吗？
感谢您的阅读！如果您希望我在本系列中探讨任何其他主题，请在评论中告诉我，或者只是让我知道您如何喜欢这个系列！
