javascript - 停止子 DIV 从其父页面继承样式

标签 javascript html css modal-dialog popup

假设有一个网页有自己的样式表。我有一个弹出窗口或模式(在页面末尾使用 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>

现在模态中出现的文本是动态的,我不希望类 headlinepara 的样式被继承。我希望模态采用默认浏览器样式。就像 iframe 不受其父页面的影响一样。不确定是否可行。

最佳答案

不,提示在名称 CSS,层叠样式表中。您将需要更具体地使用父级中的选择器。最佳实践是使用类选择器和 BEM、SMACSS 等技术来为元素的定位方式添加结构:

https://mattstauffer.com/blog/organizing-css-oocss-smacss-and-bem/

关于javascript - 停止子 DIV 从其父页面继承样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51287082/

相关文章:

javascript - Gulp 插件做一个 JavaScript "include"

Javascript:服务器端动态变量名

html - 在较大图像旁边垂直对齐 3 个图像

javascript - 如何防止在html中的数字字段中插入大于最大值的值

javascript - 如果 Logo ID 存在,则在 JQuery 的页面上隐藏另一个 ID

javascript - 为对象 VueJs 中的每个数组项创建 <li> 列表

javascript - jQuery如何在数组中查找字符串的一部分

css - 在 Angular 6 中更改侧边栏选定值的颜色

html - #0000 是什么颜色?

javascript - ng 类不工作。我哪里做错了?