为什么正文选择器中的样式声明不会覆盖 Bootstrap styles？
[英]Why do style declarations inside the body selector not override Bootstrap styles?
问题描述
I'm learning Bootstrap, and I can't understand why using body selector does not override default Bootstrap styles.
我正在学习 Bootstrap，我不明白为什么使用正文选择器不会覆盖默认的 Bootstrap styles。 Meanwhile, my own styles apply when using a universal selector (*).同时，我自己的 styles 在使用通用选择器 (*) 时适用。 Here is the HTML (you see that I'm linking Bootstrap before my style sheet):这是 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>
I want to set my own font styles, and it's not working.我想设置我自己的字体styles，它不起作用。 However, it changes with a universal selector (*).但是，它会随着通用选择器 (*) 的变化而变化。 What's the problem?有什么问题？
1 个解决方案
解决方案1
0 2022-01-26 20:37:10
What's happening here is that your CSS rules for body are being overridden by the bootstrap properties for other more specific elements, like h1 .这里发生的是您的body规则被其他更具体的元素的引导属性覆盖，例如h1 。 Your rules will only apply to plain text within the body element.您的规则仅适用于正文元素中的纯文本。
CSS behaves by the rules of specificity . CSS 的行为符合特异性规则。 When specificity is equivalent, the CSS precedence goes from:当特异性相等时，CSS 优先级来自：
- HTML elements with a
styleattribute具有style属性的 HTML 元素 <style>tag inside of an HTML documentHTML 文档中的<style>标记- External CSS documents, with last loaded taking precedence外部 CSS 文档，最后加载优先
It's worth noting that any CSS property with the !important declaration raises the item in the precedence stack, but that can be overridden if a competing CSS property elsewhere in the chain also has an !important declaration.值得注意的是，任何带有!important声明的 CSS 属性都会提升优先级堆栈中的项目，但如果链中其他位置的竞争 CSS 属性也具有!important声明，则可以覆盖该属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.