如何限制風格僅影響模式內容？

目標：對現有樣式表進行微小的更改（最好是無），如何將其包含到模式中，以便它不會更改底層頁面。例如如何限制風格僅影響模式內容？

<html> 
    <head> 
    <link rel="stylesheet" href="/css/theme1.css"/> 
    <head> 
    <body> 
    <div class="bodycontent> 
     Some stuff 
    </div> 
    <div class="modal"> 
     <link rel="stylesheet" href="/css/theme2.css"/> 
     Modal Content 
    </div> 
    </body> 
</html>

顯然，這不會工作，但希望它顯示了我想要實現的。實際上，這將theme2.css應用於整個頁面，而不僅僅是模式。有沒有辦法讓我只將樣式應用到模式中，而無需進入theme2.css並在每個規則之前放置.modal？

編輯爲清楚起見 我基本上是建設有一個模式預覽主題切換，我不喜歡我的基本頁面越來越影響。另外，假設我使用的主題非常長，並且我試圖避免兩個大的css文件，一個用於模式中的預覽，另一個用於在頁面上實際使用主題。

來源

2013-11-15 Geoffrey Ochsner

不，你必須以這樣的方式編寫你的CSS，.modal只從適用於它的更一般的CSS選擇器（例如body CSS屬性）繼承適當的樣式。

任何需要專門應用於模態和模態的選擇器應該以.modal及其繼承的任何樣式作爲前綴，您不需要以這種方式覆蓋它（這可能有助於將模態ID具有更高的特異性並且將使得更容易覆蓋所述屬性）。

我明白你可能會發現不方便，但你應該首先設計你的CSS。沒有辦法'取消'我知道的特定DOM節點的CSS繼承。

編輯：如果填充模式的內容與一個iframe（這是最體面的模態窗口腳本支持），你其實可以做你所要求的方式 - 從頁面樣式不會與風格內部干擾的iframe，這樣，您可以將模式樣式直接包含在iframe中（iframe head或作爲外部link），就像您想要的那樣。

來源

2013-11-15 18:17:10 Ennui

爲了清楚起見，我試圖避免有兩個不同的CSS文件，唯一的區別是每個規則前都有.modal，因爲主題也會出現在頁面上。模態只是一個預覽。喋喋不休地說我應該把這件事放在一邊，如果解決方案沒有發佈，我會在24小時內回答這個問題。 –

那麼不要使用不同的CSS文件呢？使用一個，並通過評論分開（如果你願意的話）。 –

@GeoffreyOchsner你不需要2個CSS文件，只需將你的'.modal'規則添加到同一個文件中（這是最好的，因爲你總是希望儘量減少GET請求的數量）。你的模態必須有一些非常複雜的樣式，這是一個問題。 – Ennui

你可以這樣做：

/*body content styles go here*/ 
.bodycontent p {} 
.bodycontent a {} 
.bodycontent h1 {} 

/*modal content styles go here*/ 
.modal p {} 
.modal a {} 
.modal h1 {}

這樣，你把你所有的風格在一張紙上，但你前綴父類/ ID的選擇。

除非您的模態是ajax或iframe，否則這是執行此操作的唯一方法。即使你使用SASS，並寫道：

.modal { 
    .a {} 
    .p {} 
    .h1 {} 
}

它仍然會編譯到上面。

來源

2013-11-15 18:25:01 jabs83

如何限制風格僅影響模式內容？

回答

相關問題