jQuery multiple CSS conflict
Question
I have an HTML file that calls an external file inside it by using load() method of jQuery . However, the CSS in main HTML file and CSS of external file conflict. I wrote an example. How can I prevent it?
load.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function ext() {
$('#aaa').load('external.txt');
}
</script>
<body onLoad="ext()">
<style>
h1 {
color:green;
}
</style>
<h1>green</h1>
<div id="aaa"></div>
external.txt
<style>
h1 {
color:red;
}
</style>
<h1>red</h1>
PS: My purpose is NOT putting classes into CSS file such as h1 #red
5 answers
solution1
3 2014-04-15 19:25:54
You could simply just apply a class to the h1 like so: <h1 class="red">Red</h1> and then just create a class like so .red { color: red; } .red { color: red; }
solution2
0 2014-04-15 19:26:19
You can use !important to set the correct style, or look into Specificity and how to use it to your advantage here.
For example, assigning a class and then calling that class in the CSS you want will over-write the generic h1 selector.
solution3
0 2014-04-15 19:31:12
You can try giving your h1's a class or id
ex. <h1 id="red"> Red </h1>
h1 #red {
color: red;
}
CSS also applies the most recent given parameter. So if, in the same file you do:
h1 {
color: red;
color: green;
}
It will make the color green.
So since you first load the ext.txt file with the body, that css is applied, then the style tags css is applied after that and will take priority over the ext.txt file being loaded before it.
Another tidbit of relevant information. CSS will also prioritize based on how specific you are in targeting the code.
Ex.
body div h1 {
color: blue;
}
h1 {
color: red;
}
Even though red is called last, since blue is more specifically targeted it will take precedence.
Edit: Also make sure your style tags ARE NOT inside of the body.
<html>
<head>
<style>Style Tags go here!</style>
</head>
<body>
Words and code and stuff
</body>
</html>
solution4
0
Surprising for me
I changed the body onload to Jquery's document.ready,
$(document).ready(function(){
$('#aaa').load('external.txt');
});
</script>
<body >
I see green in Chrome, and both green and red in Firefox, with Firebug showing me both on the source HTML.
solution5
0 2014-04-15 20:12:12
If you need to only target the first instance of the h1, you may want to use these styles instead:
h1 { color: green }
h1:first-child { color: red }
The following are some options for dominating one style over another. Which may or may not be what you want to do here. It's a little unclear.
There are several different options you can pursue. Because you say you don't want to use classes or IDs to accomplish this, I'll leave those out. Otherwise, you would be able to just use a class, or several classes to dominate the h1's style.
Load later
Without understanding the circumstances that make you want to use jQuery's load() to add a CSS file, if this must be, you could simple do this after the style tags.
<body onLoad="ext()">
<style>
h1 {
color:green;
}
</style>
<script>
function ext() {
$('#aaa').load('external.txt');
}
</script>
That being said, can I recommend a better way to do this other than just using <link.../> ? Again, I don't know the context, but if you must use JavaScript to do this...
<body>
<style>
h1 { color: red; }
</style>
<script>
var myStyle = document.createElement('link')
myStyle.rel = "stylesheet"
myStyle.href = "external.css"
document.body.appendChild(myStyle)
</script>
</body>
You can put this anywhere, it will automatically insert external.css before the ending </body> tag, giving it precedence with equal selectors.
Increased specificity
body h1 {
color: green;
}
By specifying h1 is a child of whatever parent you find handy, you've effectively made your selector more specific without using classes or IDs.
!important Attribute
I hate to use this, much less recommended, but it anoints your CSS with last-word privleges.
h1 {
color: green !important;
}
No other CSS can override this. Make sure the !important comes before the ; .
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.