gpt4 book ai didi

javascript - 多个css文件的同一个类或id之间的冲突

转载 作者:搜寻专家 更新时间:2023-10-31 22:49:50 24 4
gpt4 key购买 nike

有什么方法可以阻止多个 css 文件的相同类或 ID 之间的冲突。正如我在下面解释的以便更好地理解:

有一个主网页有几个<div>但是有一个 <div class"dynamic">它总是重新加载内容,包括 css files .让我们假设是否有任何母版页类与重新加载的元素类具有相同的名称,而属性不同。那我应该如何处理才能停止冲突。

ma​​ster.html

<html> 
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>

ma​​ster.css

.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }

现在我将重新加载的 html 元素和 css 文件显示到 dynamic div 中母版页的

reloaded tag line by ajax : <div class"myClass"> </div>

reload.css

.myClass{height: 30px; width: 25px; background: yellow; }

现在您可以看到有两个名称相同但属性不同的类。那我该如何停止冲突呢?

@Edit 感谢大家的支持和时间,但我的问题在这里有所不同。
动态重新加载的内容和 css 文件从客户端/用户机器流式传输,同时 master html page & it's css直接从服务器流式传输。
因此,无论动态 div 中加载的内容是什么,它都来自客户端 ( e.g. tag lines & css, js )。在那种情况下,我无法处理由 ajax() 重新加载的 css 文件。所以我认为可以使用 js/jQuery fn() 来解决.

最佳答案

您可以应用 CSS 的级联规则:

在你的情况下, div.dynamic 中的 div.myClass 应该覆盖属于 bodydiv.myClass >。

你将reload.css规则调整为

.dynamic .myClass{height: 30px; width: 25px; background: yellow; }

决定哪些规则应该应用到html div时应用的级联规则可以引用here

11.23 更新

由于 OP 只能控制 master.css,因此上述解决方案将不起作用。因此,我建议使用 child 选择器 将 CSS 规则限制在外部 div.myClass。将 master.css 中的规则修改为:

body > .myClass {...}

此规则将仅适用于 .myClass,它是body 的子级。它为内部 .myClass div 留出了样式空间。

关于javascript - 多个css文件的同一个类或id之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8224948/

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