Why do style declarations inside the body selector not override Bootstrap styles?
Question
I'm learning Bootstrap, and I can't understand why using body selector does not override default Bootstrap styles. Meanwhile, my own styles apply when using a universal selector (*). Here is the HTML (you see that I'm linking Bootstrap before my style sheet):
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. However, it changes with a universal selector (*). What's the problem?
1 answers
solution1
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 . Your rules will only apply to plain text within the body element.
CSS behaves by the rules of specificity . When specificity is equivalent, the CSS precedence goes from:
- HTML elements with a
styleattribute <style>tag inside of an HTML document- External CSS documents, with last loaded taking precedence
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.