Question

有没有办法阻止同一个类或多个css文件的ID之间的冲突。正如我在下面解释的那样，为了更好地理解：

有一个主网页有多个<div>，但有<div class"dynamic">总是会重新加载包含css files的内容。假设任何类的母版页具有相同的名称，以便在属性不同时重新加载元素的类。那么我应该如何处理这个以阻止冲突。

的 master.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>

的 master.css 的

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

现在我正在显示重新加载的html元素＆amp;将css文件导入主页的dynamic div

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

的 reload.css 的

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

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

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

Answer 1

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

在您的情况下，div.myClass内的div.dynamic应覆盖div.myClass属于body。

您将reload.css规则调整为

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

确定哪些规则应适用于html div 时应用的级联规则可以引用here

更新了11.23

由于OP只能控制master.css，因此上述解决方案无效。因此，我建议使用子选择器将CSS规则限制为仅限外div.myClass。将master.css中的规则修改为：

body > .myClass {...}

此规则仅适用到.myClass body的孩子。它为内部.myClass div留下了样式空间。

Answer 2

选项1：更具体的选择器

.dynamic .myClass { }

此选择器选择.myClass后代的.dynamic元素。

.dynamic > .myClass { }

此选择器选择.myClass的直接子项.dynamic元素。

选项2：内联CSS

<div class="dynamic">
    <div class="myClass" style="background-color: yellow;"></div>
</div>

选项3：使用其他类。

<强>更新

如果要避免以前定义的属性被以后定义的值覆盖，可以使用!important语法。

.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */

如果我理解你的问题，应该对它进行排序。

因此，您应该将!important添加到似乎被覆盖的属性中。

Answer 3

div.myclass { ble ble }

div.main div.myclass { ble ble }

<body>
 <div class="myclass"></div>
 <div class="main><div class="myclass"></div></div>
</body>

Answer 4

最后加载的同名css类将覆盖前一类设置的任何内容。但是，如果使用内联样式属性，则始终优先于css文件设置的任何内容（因此使用内联样式是一个选项）。

您还可以使用不同的样式名称或使用代码名称div.myClass或ID #myDiv.myClass来澄清您的样式。

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

4 个答案:

更新了11.23