将包装器应用于 css 块答案

【问题标题】：Apply wrapper to css block将包装器应用于 css 块
【发布时间】：2016-09-01 18:51:54
【问题描述】：

我在特定页面上覆盖了几种 CSS 样式。我有一个围绕整个事物的包装器 div，所以我希望我可以将修改后的样式添加到我的样式表中，而不必将包装器 div 附加到每个样式。

这样的……

#myWrapper {

     #existingStyleImOverriding { width:100%; etc; }
     ...more styles....

}

这样，“修改”样式仅适用于 myWrapper div 围绕内容的情况。无论如何，无需更改每种样式，例如...

#myWrapper #existingStyleImOverriding { width:100%; etc; }
....

【问题讨论】：

如果您希望包装器中具有新 ID 的每个元素的宽度为 100%，您可以添加：#myWrapper * {width: 100%;}
@SeanHenderson - 谢谢你的建议，但宽度只是一个例子，我的风格比这更复杂和独特。我想我只需要为这个特定页面创建一个单独的工作表，或者在我想要覆盖的所有内容之前添加#myWrapper
第一个示例中的 CSS 无效。你用的是SASS还是什么的？添加该标签。
如果您能够更改 html，您可以使用某种修饰符类来执行您的覆盖。例如.w100 { width:100%; }。不过，我需要查看更多代码才能了解您的目标。

标签： html css sass

【解决方案1】：

您似乎想利用sass 的嵌套功能。

它会让你这样写：

#myWrapper {
  #override1 { width:100%; }
  #override2 { width:100%; }
  #override3 { width:100%; }
  #override4 { width:100%; }
}

然后它会编译成这样：

#myWrapper #override1 {
  width: 100%;
}
#myWrapper #override2 {
  width: 100%;
}
#myWrapper #override3 {
  width: 100%;
}
#myWrapper #override4 {
  width: 100%;
}

【讨论】：