Question

我是 Web 开发的新手，并且在 CSS 中遇到了一个问题。根据 CSS 特性，它遵循内联 > id 选择器 > 类选择器 > 标签选择器 > 浏览器默认值，但在我的情况下，标签选择器覆盖了类选择器，我没有得到所需的输出。我的 HTML 和 CSS 代码是

p {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.spring-boot {
  font-family: cursive;
}

<article class="spring-boot">
  <h1>
    Spring Boot
  </h1>
  <p>Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run".</p>

</article>

下面是输出： Google Chrome Version 90.0.4430.72 (Official Build) (64-bit) Output

Answer 1

阅读并通读此https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks
另请注意，CSS 是级联的，这意味着如果您使用具有相似特性的选择器，那么您稍后在 css 文件中定义的选择器将优先于您之前定义的规则集。
通常，如果您有冲突的规则集，那就是选择器具有相同的重要性，那么您就不会得到所需的输出。检查并确保您的 css 文件中不是这种情况。

Answer 2

这是因为您的目标元素是具有目标类的元素的子元素。

对于您的预期行为，要么将类移动到实际的 p 元素 .spring-boot 或为您的类选择器添加更高的准确性，例如 .spring-boot p 以定位该类的子项。

CSS 特性：标签选择器覆盖类选择器

2 个答案: