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>标签后面放了一个外部样式表，我注意到它覆盖了内部。

考虑我使用的是bootstrap库和Google Fonts。我将首先加载它们，然后以我自己的样式覆盖它们。

<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>

他们两个都没有区别。您加载的订单非常重要。