对样式表优先级感到困惑

Question

我已经阅读并了解到内部样式表将覆盖外部样式表。而且，我了解到最后调用的样式表将覆盖前一个。

话虽如此，当我无意中在<style> 标记之后放置了一个外部样式表时，我注意到它覆盖了内部样式表。这是有道理的，因为外部工作表是最后调用的，但是到目前为止，我了解到内部 CSS 具有更高的优先级，是否将其放在外部工作表之前并不重要，对吧？

Answer 1

样式只有三种：

• 内联
• 嵌入式
• 外部

并且内联样式非常强大，因为它们与标签一起包含：

<div style="/* rules */">

嵌入样式与外部样式几乎相似。嵌入式样式是通过在同一页面内使用 <style> 标记来定义的。嵌入样式和外部样式的主要区别在于，嵌入样式是特定于包含它们的页面，而外部样式是通用的任何使用它的页面。

<!-- External Style -->
<link rel="stylesheet" href="style.css" />
<!-- Embedded Style -->
<style>
  /* Page Specific */
</style>

而具体性对您导入样式的方式很重要。始终先加载外部样式 <link />，然后再加载特定于页面的嵌入 <style> 标签。

具体如下：

^{* 图片来源CSS Tricks。}

我无意中在<style> 标签之后放置了一个外部样式表，我注意到它覆盖了内部样式表。

假设我正在使用引导库和 Google 字体。我会先加载它们，然后用我自己的样式覆盖它们。

<link rel="stylesheet" href="googlefonts.css" />
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="custom-styles.css" />

在 CSS 文件中嵌入或内部样式与使用 <style> 标签没有区别。加载优先顺序很重要。

一个 CSS 文件，比如 style.css，包含以下内容：

* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}

还有这样的样式标签：

<style>
  * {margin: 0; padding: 0; list-style: none;}
  body {font-family: 'Segoe UI'; font-size: 10pt;}
</style>

两者没有区别。您加载的顺序非常重要。