如何使 HTML 文件的一部分遵循特定的 css 样式表

Question

So I have looked for a while but i can't find the answer. To explain more precisely, I have an HTML file where there are <style> tags in the head of the file. I want for the header of the HTML file to folow a dedicated CSS file. Right now the tags in the head override the CSS file.

Answer 1

CSS is applied through a specific set of programmatic rules.

1. in-line CSS. This has highest priority and overrides both stylesheets and <style> tag rules.
2. <style> tag has second highest priority and overrides stylesheets.
3. Stylesheet has the lowest priority and will only come into effect if the 2 prior cases aren't available.

Outside of those 3 points, another set of rules also apply. Specificity, and top-down. The most specified rules take precedence, and afterwards it's whichever rule was specified last.

In action:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <style>.btn-danger { background-color: blue; border: 5px solid black; } </style> <button class="btn btn-danger" style="background-color: green;">CSS TESTER</button>

What you experience in the above snippet, is that we pull in a Bootstrap stylesheet, and style our button with the btn-danger class to give it a red background and subtle border with red color.

We then add a <style> tag, make the button blue and change the border styling.

Lastly, we make an in-line style rule to make the button green, making the end-result a button with a green background color, and a big black border, overriding the Bootstrap class from the stylesheet.

Find a quick read on the problem you are experiencing here .