如何限制风格仅影响模式内容？

目标：对现有样式表进行微小的更改（最好是无），如何将其包含到模式中，以便它不会更改底层页面。例如如何限制风格仅影响模式内容？

<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

如何限制风格仅影响模式内容？

回答

相关问题