嘿，欢迎回到边学边编码：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 对其进行样式设置。

• 使用类选择器让其他文本变得有趣。

尝试不同的风格，看看哪种规则获胜。你能找出原因吗？

感谢您的阅读！如果您希望我在本系列中探讨任何其他主题，请在评论中告诉我，或者只是让我知道您如何喜欢这个系列！

以上就是进一步完善造型的详细内容，更多请关注php中文网其它相关文章！