Question

目标：对现有样式表进行最小的更改（最好不需要），如何将其对效果包含在模态中，以便它不会更改基础页面。例如

<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文件，一个用于模态中的预览，另一个用于在页面上实际使用主题时。

Answer 1

不，您必须以这样的方式编写CSS：.modal仅从适用于它的更常规CSS选择器继承适当的样式（例如body CSS属性）。

任何需要专门应用于模态和模态的选择器都应该以{{1}}为前缀，并且它继承的任何样式都不需要以这种方式覆盖（这可能有助于给出模态一个具有更高特异性的ID，可以更容易覆盖所述属性。）

我知道你可能会觉得不方便，但你应该首先以这种方式设计你的CSS。对于我所知道的特定DOM节点，无法“取消”CSS继承。

编辑：如果使用iframe填充模态内容（大多数体面的模态窗口脚本都支持），您实际上可以按照要求的方式进行填充 - 页面中的样式不会干扰iframe内部的样式，这样您就可以直接在iframe（iframe .modal或外部head）中包含模态样式。

Answer 2

您可以执行以下操作：

/*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 {}
}

它仍然可以编译到上面。

如何限制样式仅影响模态中的内容？

2 个答案: