gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:09:37 27 4
gpt4 key购买 nike

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com