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; }

Answer 2

您可以使用!important设置正确的样式，或查看Specificity以及如何在此处利用它。

例如，分配class然后在您想要的CSS中调用class将覆盖通用h1选择器。

Answer 3

您可以尝试为您的h1提供课程或身份证明

离。 <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。

！important属性

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

h1 {
  color: green !important;
}

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

jQuery多个CSS冲突

5 个答案: