jQuery多个CSS冲突

Question

我有一个HTML文件，通过使用jQuery的 load()方法调用其中的外部文件。 但是，主HTML文件中的CSS与外部文件的CSS冲突。 我写了一个例子。 我该怎样预防呢？

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：我的目的不是将类放入CSS文件中，例如h1 #red

Answer 1

您可以简单地将类应用于h1，如下所示： <h1 class="red">Red</h1>然后只需创建一个类.red { color: red; } .red { color: red; }

Answer 2

您可以使用!important来设置正确的样式，或者查看特异性以及如何在此处使用它。

例如，分配一个class然后在所需的CSS中调用class将覆盖泛型h1选择器。

Answer 3

你可以尝试给你的h1上课或者id

恩。 <h1 id="red"> Red </h1>

h1 #red {
    color: red;
}

CSS也适用于最新的给定参数。 所以，如果你在同一个文件中：

h1 {
   color: red;
   color: green;
}

它会使颜色变绿。

因此，首先使用正文加载ext.txt文件，然后应用该css，然后应用样式标记css，并优先于之前加载的ext.txt文件。

另一条相关信息。 CSS还将根据您定位代码的具体程度确定优先级。

防爆。

body div h1 {
   color: blue;
}

h1 {
   color: red;
}

即使红色被称为最后，因为蓝色是更具体的目标，它将优先。

编辑：还要确保您的样式标签不在身体内部。

<html>
    <head>
        <style>Style Tags go here!</style>
    </head>
    <body>
        Words and code and stuff
    </body>
</html>

Answer 4

让我感到惊讶

我将body onload更改为Jquery的document.ready，

$(document).ready(function(){
 $('#aaa').load('external.txt');
});

</script>

<body >

我在Chrome中看到绿色，在Firefox中看到绿色和红色，Firebug在源HTML上显示我。

Answer 5

如果您只需要定位h1的第一个实例，则可能需要使用这些样式：

h1             { color: green }
h1:first-child { color: red }

以下是一种主导一种风格而非另一种风格的选择。 这可能是你想要做的，也可能不是。 这有点不清楚。

您可以选择几种不同的选择。 因为你说你不想使用类或ID来完成这个，我会把它们留下来。 否则，你可以只使用一个类或几个类来支配h1的风格。

稍后加载

如果不了解使用jQuery的load()来添加CSS文件的情况，如果必须这样，您可以在样式标记之后执行此操作。

<body onLoad="ext()">

<style>
    h1 {
        color:green;
    }
</style>

<script>
function ext() {
    $('#aaa').load('external.txt');
}
</script>

话虽这么说，除了使用<link.../>之外，我还能推荐更好的方法吗？ 同样，我不知道上下文，但如果你必须使用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>

你可以将它放在任何地方，它会在结束</body>标记之前自动插入external.css，使其优先于相同的选择器。

增加特异性

body h1 {
  color: green;
}

通过指定h1是您找到的任何父级的子级，您可以有效地使您的选择器更具体，而无需使用类或ID。

！重要属性

我讨厌使用它，更不用说推荐了，但它用最后一个字段来限制你的CSS。

h1 {
  color: green !important;
}

没有其他CSS可以覆盖它。 确保!important在...之前; 。

jQuery多个CSS冲突

问题描述

5 个解决方案

解决方案1
3 2014-04-15 19:25:54

解决方案2
0 2014-04-15 19:26:19

解决方案3
0 2014-04-15 19:31:12

解决方案4
0

解决方案5
0 2014-04-15 20:12:12

jQuery多个CSS冲突

问题描述

5 个解决方案

解决方案1 3 2014-04-15 19:25:54

解决方案2 0 2014-04-15 19:26:19

解决方案3 0 2014-04-15 19:31:12

解决方案4 0

解决方案5 0 2014-04-15 20:12:12

解决方案1
3 2014-04-15 19:25:54

解决方案2
0 2014-04-15 19:26:19

解决方案3
0 2014-04-15 19:31:12

解决方案4
0

解决方案5
0 2014-04-15 20:12:12