html - 如何摆脱内部元素小部件中的 CSS 级联

Question

我有一个包含大量页面的网络应用程序。每个页面都有一些模态窗口。

这种带有模态的页面结构如下:

<div class='page1'>
     <p>Page 1 content here</p>
     <div class='modal'><p>Modal window</p>
</div>

问题是如何分离模态和页面的css样式，即让页面样式不影响模态样式。

例如，样式 p { font-weight: 900 } 将同时影响页面和模态段落。

澄清一下:问题不在于如何编写通过 div.page + p 缩小选择器的 css 选择器， 它的问题是如何将小部件的 HTML 组织为模式，这些模式在上下文中绑定(bind)到某些元素/页面/组件。

最简单的解决方案是将所有这些模态框放在页面组件之外，但这会降低可读性，因为不清楚模态框属于哪个上下文模态框。

Answer 1

虽然您可以定义一堆样式来删除页面中可能已设置的所有可能样式，以便为您的小部件准备好清除它，但如果您可以控制此代码结构，这不是一个很好的方法。

更好的方法是在语义上使用 CSS 并定义一组适用于您的页面样式的类名，而不使用通用标签选择器，除非您确实希望标记中的 every 标签使用那种风格。

p { somestyles: here; }

应该意味着每个 p 都必须遵守这一点，无论它来自哪里，小部件等等。如果你想让我的内容中的 p 遵循我的风格，那么写

.mycontent > p { somestyles: here; }

并让标记成为

<div class="page1 mycontent">
     <p>Page 1 content here</p>
     <div class="modal"><p>Modal window</p>
</div>

说出你真正的意思，CSS 会更自然地流动。

编辑

iframe 将停止级联，但您随后要从标记中完全删除小部件(到另一个文件)，这听起来像是您不想要的。

对我来说，模态与调用它们的标记是分开的，可以放在其他地方，如果开发人员需要知道该信息，您可以在打开它的地方添加注释。一种模式可以合法地被页面上的许多元素重复使用。

至于停止容器影响它们的内容，这就是它们在 CSS 领域的作用，但如果你真的想解决它，那么你可以创建一个“重置”类，将所有样式属性设置回它们在应用样式之前的样子。不过，没有办法只关闭级联。