假设有一个网页有自己的样式表。我有一个弹出窗口或模式(在页面末尾使用 Javascript 附加),我想在其中拥有自己的样式。内容是动态的,所以我无法针对每个元素。有没有办法重置子元素内的 css 或限制影响它的父样式表?
.headline{ color:blue; text-transform:uppercase;font-size:30px;}
.para{color:green;}
<html><body>
<div class="parent">
<h2 class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p class="para">
Phasellus sed molestie quam. Aliquam id sodales est. Fusce non metus lacinia, tempor sapien quis, ultricies nisl.
</p>
</div>
<div class="modal">
<h2 class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p class="para">
Phasellus sed molestie quam. Aliquam id sodales est. Fusce non metus lacinia, tempor sapien quis, ultricies nisl.
</p>
</div>
</body></html>
现在模态中出现的文本是动态的,我不希望类 headline 和 para 的样式被继承。我希望模态采用默认浏览器样式。就像 iframe 不受其父页面的影响一样。不确定是否可行。
最佳答案
不,提示在名称 CSS,层叠样式表中。您将需要更具体地使用父级中的选择器。最佳实践是使用类选择器和 BEM、SMACSS 等技术来为元素的定位方式添加结构:
https://mattstauffer.com/blog/organizing-css-oocss-smacss-and-bem/
关于javascript - 停止子 DIV 从其父页面继承样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51287082/