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

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元素和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中加载，它都来自客户端（ eg 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时应用的级联规则可以在这里引用

已更新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：使用不同的类。

UPDATE

如果要避免以前定义的属性被以后定义的值覆盖，可以使用!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 个解决方案

解决方案1
2 已采纳 2011-11-22 10:06:00

已更新11.23

解决方案2
2 2011-11-22 10:09:54

解决方案3
1 2011-11-22 10:05:16

解决方案4
1 2011-11-22 10:06:37

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2011-11-22 10:06:00

已更新11.23

解决方案2 2 2011-11-22 10:09:54

解决方案3 1 2011-11-22 10:05:16

解决方案4 1 2011-11-22 10:06:37

解决方案1
2 已采纳 2011-11-22 10:06:00

解决方案2
2 2011-11-22 10:09:54

解决方案3
1 2011-11-22 10:05:16

解决方案4
1 2011-11-22 10:06:37