对样式表优先级感到困惑

Question

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

话虽如此，当我无意间在我的 <style> 标签后放置了外部样式 sheet 时，我注意到它覆盖了内部样式。这是有道理的，因为外部 sheet 最后被调用，但是根据我到目前为止所了解的内部 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.}

I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal.

假设我正在使用 bootstrap 库和 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>

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

Confused about stylesheet precedence