我有一個HTML文件，它使用load()方法jQuery調用其中的外部文件。但是，主HTML文件中的CSS與外部文件的CSS衝突。我寫了一個例子。我怎樣才能防止它？jQuery多個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

來源

2014-04-15 halilkaya

那麼你最終會得到什麼顏色？ – adeneo

也是 - > http://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html – adeneo

他們都是紅色的 – halilkaya

你可以只需申請一個班級到H1像這樣：<h1 class="red">Red</h1>，然後就創建像這樣.red { color: red; }

來源

2014-04-15 19:25:54 learn

使用重要的是CSS中的nono：https：//developer.mozilla.org/en-US/docs/Web/CSS/Specificity。有一個原因爲什麼在* CSS *中有* cascading *這個詞。如果您刪除重要內容並添加分號，我會贊成該答案。 –

沒問題。我知道你的意思，當我添加！重要的時候我沒有想到。你可以upvote，如果你喜歡:) – learn

@ Karl-AndréGagnon從這個意義上說，這只是一個不好的做法，通常是不好的做法。沒有什麼是無用的！重要的。 –

您可以使用!important設置正確的樣式，或可考慮Specificity，以及如何在這裏使用你的優勢的一類。

例如，分配class，然後在您想要的CSS中調用class將覆蓋通用h1選擇器。

來源

2014-04-15 19:26:19

但是，如果我寫！對HTML中的CSS很重要，那麼它們都變成綠色。 – halilkaya

@halilkaya然後給他們獨特的課程和目標 –

@halilkaya你能提供更多的背景知道你爲什麼這樣做嗎？從一開始，這可能是一個有缺陷的方法。 –

你可以嘗試給你的h1的一個類或ID

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

h1 #red { 
    color: red; 
}

CSS也應用最近給定的參數。所以如果你在同一個文件中做：

h1 { 
    color: red; 
    color: green; 
}

它會使顏色變綠。

因此，由於您第一次加載ext.txt文件的正文，該css應用，然後風格標籤css應用後，將優先於ext.txt文件之前加載。

相關信息的另一個珍聞。 CSS還將根據您在定位代碼時的具體情況確定優先級。

Ex。

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>

來源

2014-04-15 19:31:12 JacobW

我用PS編輯了我的問題。 – halilkaya

嘗試根據它們的定位方式進行操作，否則可以與其樣式一致。 ex。 '

標題

' – JacobW

令人驚訝的對我

我改變了身體的onload到jQuery的的document.ready，

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

</script> 

<body >

我看到綠色的Chrome瀏覽器和兩個綠色和紅色在Firefox中，用Firebug顯示我都在源代碼HTML上。

來源

2014-04-15 19:36:42

如果您只需要針對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更具體的一個孩子。

！重要的屬性

我不喜歡用這個，更沒有推薦，但與去年字privleges膏抹你的CSS。

沒有其他的CSS可以覆蓋這個。確保!important在;之前。

來源

2014-04-15 20:12:12

jQuery多個CSS衝突

回答

標題

相關問題