jQuery多个CSS冲突
[英]jQuery multiple CSS conflict
问题描述
I have an HTML file that calls an external file inside it by using load() method of jQuery . 
我有一个HTML文件，通过使用jQuery的 load()方法调用其中的外部文件。 However, the CSS in main HTML file and CSS of external file conflict. 但是，主HTML文件中的CSS与外部文件的CSS冲突。 I wrote an example. 我写了一个例子。 How can I prevent it? 我该怎样预防呢？
load.html 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 external.txt
<style>
h1 {
color:red;
}
</style>
<h1>red</h1>
PS: My purpose is NOT putting classes into CSS file such as h1 #red PS：我的目的不是将类放入CSS文件中，例如h1 #red
5 个解决方案
解决方案1
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; } 您可以简单地将类应用于h1，如下所示： <h1 class="red">Red</h1>然后只需创建一个类.red { color: red; } .red { color: red; }
解决方案2
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. 您可以使用!important来设置正确的样式，或者查看特异性以及如何在此处使用它。
For example, assigning a class and then calling that class in the CSS you want will over-write the generic h1 selector. 例如，分配一个class然后在所需的CSS中调用class将覆盖泛型h1选择器。
解决方案3
0 2014-04-15 19:31:12
You can try giving your h1's a class or id 你可以尝试给你的h1上课或者id
ex. 恩。 <h1 id="red"> Red </h1>
h1 #red {
color: red;
}
CSS also applies the most recent given parameter. CSS也适用于最新的给定参数。 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. 因此，首先使用正文加载ext.txt文件，然后应用该css，然后应用样式标记css，并优先于之前加载的ext.txt文件。
Another tidbit of relevant information. 另一条相关信息。 CSS will also prioritize based on how specific you are in targeting the code. CSS还将根据您定位代码的具体程度确定优先级。
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>
解决方案4
0
Surprising for me 让我感到惊讶
I changed the body onload to Jquery's document.ready, 我将body onload更改为Jquery的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. 我在Chrome中看到绿色，在Firefox中看到绿色和红色，Firebug在源HTML上显示我。
解决方案5
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的第一个实例，则可能需要使用这些样式：
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. 因为你说你不想使用类或ID来完成这个，我会把它们留下来。 Otherwise, you would be able to just use a class, or several classes to dominate the h1's style. 否则，你可以只使用一个类或几个类来支配h1的风格。
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. 如果不了解使用jQuery的load()来添加CSS文件的情况，如果必须这样，您可以在样式标记之后执行此操作。
<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.../> ? 话虽这么说，除了使用<link.../>之外，我还能推荐更好的方法吗？ Again, I don't know the context, but if you must use JavaScript to do this... 同样，我不知道上下文，但如果你必须使用JavaScript来做到这一点......
<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. 你可以将它放在任何地方，它会在结束</body>标记之前自动插入external.css，使其优先于相同的选择器。
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. 通过指定h1是您找到的任何父级的子级，您可以有效地使您的选择器更具体，而无需使用类或ID。
!important Attribute ！重要属性
I hate to use this, much less recommended, but it anoints your CSS with last-word privleges. 我讨厌使用它，更不用说推荐了，但它用最后一个字段来限制你的CSS。
h1 {
color: green !important;
}
No other CSS can override this. 没有其他CSS可以覆盖它。 Make sure the !important comes before the ; 确保!important在...之前; . 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.