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

Question

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

具有模态的页面结构如下：

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

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

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

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

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

Answer 1

虽然您可以定义一组样式来删除可能已在页面中设置的每种可能样式以清除它为窗口小部件做好准备，但如果您可以控制此代码结构，这不是一个非常好的方法。

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

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领域的目标，但如果你真的想解决它，那么你可以创建一个＆＃34;重置＆＃34 ;将所有样式属性设置回应用样式之前的类的类。但是，不能仅仅关闭级联。

Answer 2

使用.modal p { font-weight: 900 }或.modal > p { font-weight: 900 }作为模态元素！

在模态的每个元素之前使用.modal，不会产生混淆！

有关详细信息，请了解css选择器的有趣CSS Selectors