對不同的HTML文檔元素使用具有相同規則名稱的不同CSS表格

Question

我需要一種方法來加載具有相同規則名稱的多個樣式表，然後將它們應用於頁面上的不同元素。這可能嗎？

這是我想要做的事情的一個例子。採取下面的兩個樣式表：

style1.css：

.size{ 
    color: #FF6600; 
    font-size: 18px; 
} 

style2.css：

.size{ 
    color: #FF0000; 
    font-size: 14px; 
} 

我希望能夠兩者導入到一個頁面（可能一個id），然後在一個特定div中設置文本以使用style1.css中的規則，另一個div應該使用style2.css中的規則。

我需要這樣做，因爲它可以讓我的應用程序的用戶上傳頁面上不同小部件的自定義樣式表。如果工作表使用相同的規則命名方案，該方案應該可行。

Answer 1

答案是否定的，你不能這樣做。最後加載的規則將優先。

你應該區分不同部件與不同類或ID，然後你不會有相同的規則。

#widgetB .size{ 
     color: #FF0000; 
     font-size: 14px; 
} 

#widgetA .size{ 
     color: purple; 
     font-size: 10px; 
} 

Answer 2

如果執行此操作，則最後加載的樣式表中聲明的規則將應用於所匹配的所有元素。

Answer 3

也許你可以使用像jQuery來刪除默認的網頁CSS和與用戶的樣式表替換它，基本上交換在客戶端的樣式表。

Answer 4

也許你可以把每個小部件放在一個iframe中。在該iframe中，您將爲該小部件調用自定義樣式表。這樣你就可以贏得更多的模塊化，並且允許你直接做你想做的事情，而不用擔心祕籍能夠解決問題。

Answer 5

要直接回答你的問題，「不」。 CSS代碼本身必須具有某種上下文。至於「它將允許我的應用程序的用戶上傳頁面上的不同小部件的自定義樣式表」 - 我讀到的方式，我建議像包裝每個小部件在一個唯一的ID或類似的東西。

然後，用戶可以上傳樣式與一些背景，但還是基本相同的名字，如：

#widget-one .size { ... } 

#widget-two .size { ... } 

但某種語境/前綴是必要的。