为什么正文选择器中的样式声明不会覆盖 Bootstrap styles？

Question

我正在学习 Bootstrap，我不明白为什么使用正文选择器不会覆盖默认的 Bootstrap styles。 同时，我自己的 styles 在使用通用选择器 (*) 时适用。 这是 HTML （你看到我在我的样式表之前链接引导程序）：

 body { font-family: 'Oxygen', sans-serif; font-size: 24px; font-weight: normal; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>David Chu's China Bistro</title> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Oxygen;wght@300;400.700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style,css"> </head> <body> <h1>Hello. World.</h1> <script src="js/bootstrap.min.js"></script> </body> </html>

我想设置我自己的字体styles，它不起作用。 但是，它会随着通用选择器 (*) 的变化而变化。 有什么问题？

Answer 1

这里发生的是您的body规则被其他更具体的元素的引导属性覆盖，例如h1 。 您的规则仅适用于正文元素中的纯文本。

CSS 的行为符合特异性规则。 当特异性相等时，CSS 优先级来自：

具有style属性的 HTML 元素
HTML 文档中的<style>标记
外部 CSS 文档，最后加载优先

值得注意的是，任何带有!important声明的 CSS 属性都会提升优先级堆栈中的项目，但如果链中其他位置的竞争 CSS 属性也具有!important声明，则可以覆盖该属性。

为什么正文选择器中的样式声明不会覆盖 Bootstrap styles？

问题描述

1 个解决方案

解决方案1
0 2022-01-26 20:37:10

为什么正文选择器中的样式声明不会覆盖 Bootstrap styles？

问题描述

1 个解决方案

解决方案1 0 2022-01-26 20:37:10

解决方案1
0 2022-01-26 20:37:10