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