同一個類或多個css文件的id之間的沖突

Question

有沒有辦法阻止多個css文件的同一個類或id之間的沖突。 正如我在下面解釋為了更好地理解：

有一個主網頁有幾個<div>但有一個<div class"dynamic"> ，它總是重新加載包括css files的內容。 假設任何類的母版頁具有相同的名稱，以便在屬性不同時重新加載元素的類。 那么我應該如何處理這個以阻止沖突。

master.html

<html> 
    <head> //attached master.css file here </head>
    <body> 
        <div class="myClass"> </div>
        <div class="dynamic"> /* often reload elements by ajax */ </div> 
    </body>
</html>

master.css

.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }

現在我將重新加載的html元素和css文件顯示到母版頁的dynamic div中

reloaded tag line by ajax : <div class"myClass"> </div>

reload.css

.myClass{height: 30px; width: 25px; background: yellow; }

現在您可以看到有兩個具有相同名稱但屬性不同的類。 那我該如何制止沖突呢？

@Edit感謝大家的支持和時間，但我的問題在這里有所不同。
動態重新加載的內容和css文件從客戶端/用戶機器流式傳輸，而master html page & it's css直接從服務器傳輸。
所以無論內容在動態div中加載，它都來自客戶端（ eg tag lines & css, js ）。 在這種情況下，我無法處理剛剛由ajax()重新加載的css文件，所以我認為它可以使用js/jQuery fn()進行排序。

Answer 1

您可以應用CSS的級聯規則：

在你的情況下， div.myClass里面的div.dynamic應該覆蓋div.myClass屬於body 。

你調整reload.css規則

.dynamic .myClass{height: 30px; width: 25px; background: yellow; }

在確定哪些規則應該應用於html div時應用的級聯規則可以在這里引用

已更新11.23

由於OP只能控制master.css ，因此上述解決方案無效。 因此，我建議使用子選擇器將CSS規則限制為僅限於外部div.myClass 。 將master.css的規則修改為：

body > .myClass {...}

此規則僅適用於.myClass這是孩子body 。 它為內部.myClass div留下了樣式空間。

Answer 2

選項1：更具體的選擇器

.dynamic .myClass { }

該選擇器選擇的.myClass即的后代元件.dynamic 。

.dynamic > .myClass { }

器選擇.myClass是直接子元素.dynamic 。

選項2：內聯CSS

<div class="dynamic">
    <div class="myClass" style="background-color: yellow;"></div>
</div>

選項3：使用不同的類。

UPDATE

如果要避免以前定義的屬性被以后定義的值覆蓋，可以使用!important語法。

.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */

如果我正確理解你的問題，這應該排序。

因此，您應該將!important添加到似乎被覆蓋的屬性中。

Answer 3

div.myclass { ble ble }

div.main div.myclass { ble ble }

<body>
 <div class="myclass"></div>
 <div class="main><div class="myclass"></div></div>
</body>

Answer 4

最后加載的同名css類將覆蓋前一類設置的任何內容。 但是，如果使用內聯樣式屬性，則始終優先於css文件設置的任何內容（因此使用內聯樣式是一個選項）。

您還可以使用不同的樣式名稱或使用標記名稱div.myClass或id的#myDiv.myClass闡明您的樣式。

同一個類或多個css文件的id之間的沖突

問題描述

4 個解決方案

解決方案1
2 已采納 2011-11-22 10:06:00

已更新11.23

解決方案2
2 2011-11-22 10:09:54

解決方案3
1 2011-11-22 10:05:16

解決方案4
1 2011-11-22 10:06:37

同一個類或多個css文件的id之間的沖突

問題描述

4 個解決方案

解決方案1 2 已采納 2011-11-22 10:06:00

已更新11.23

解決方案2 2 2011-11-22 10:09:54

解決方案3 1 2011-11-22 10:05:16

解決方案4 1 2011-11-22 10:06:37

解決方案1
2 已采納 2011-11-22 10:06:00

解決方案2
2 2011-11-22 10:09:54

解決方案3
1 2011-11-22 10:05:16

解決方案4
1 2011-11-22 10:06:37