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

Question

Is there any way to stop the conflict between same class or id of multiple css files. 有没有办法阻止多个css文件的同一个类或id之间的冲突。 As I am explaining below for better understanding: 正如我在下面解释为了更好地理解：

There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files . 有一个主网页有几个<div>但有一个<div class"dynamic"> ，它总是重新加载包括css files的内容。 Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. 假设任何类的母版页具有相同的名称，以便在属性不同时重新加载元素的类。 Then how should I handle this to stop the conflict. 那么我应该如何处理这个以阻止冲突。

master.html 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 master.css

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

now i am showing the reloaded html elements & css files into dynamic div of master page 现在我将重新加载的html元素和css文件显示到母版页的dynamic div中

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

reload.css reload.css

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

Now as you can see there are two classes with same name but different properties. 现在您可以看到有两个具有相同名称但属性不同的类。 Then how should I stop the confliction? 那我该如何制止冲突呢？

@Edit Thanks everyone for your support & time but my problem is different here. @Edit感谢大家的支持和时间，但我的问题在这里有所不同。
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server. 动态重新加载的内容和css文件从客户端/用户机器流式传输，而master html page & it's css直接从服务器传输。
so whatever the contents loads in dynamic div, it's coming from client side ( eg tag lines & css, js ). 所以无论内容在动态div中加载，它都来自客户端（ eg tag lines & css, js ）。 in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn() . 在这种情况下，我无法处理刚刚由ajax()重新加载的css文件，所以我认为它可以使用js/jQuery fn()进行排序。

Answer 1

You could apply the cascading rules of the CSS: 您可以应用CSS的级联规则：

In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body . 在你的情况下， div.myClass里面的div.dynamic应该覆盖div.myClass属于body 。

you adjust the reload.css rules to 你调整reload.css规则

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

The cascading rules which are applied when determine which rules should apply to html div could be referenced here 在确定哪些规则应该应用于html div时应用的级联规则可以在这里引用

Updated 11.23 已更新11.23

As the OP only have control over master.css , the above solution won't work. 由于OP只能控制master.css ，因此上述解决方案无效。 Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass . 因此，我建议使用子选择器将CSS规则限制为仅限于外部div.myClass 。 Modify the rule in your master.css to: 将master.css的规则修改为：

body > .myClass {...}

This rule will only apply to the .myClass which is the child of body . 此规则仅适用于.myClass这是孩子body 。 It leaves the spaces of styling for inner .myClass div. 它为内部.myClass div留下了样式空间。

Answer 2

Option 1: A more specific selector 选项1：更具体的选择器

.dynamic .myClass { }

This selector selects the .myClass element that is a descendent of .dynamic . 该选择器选择的.myClass即的后代元件.dynamic 。

.dynamic > .myClass { }

This selector selects the .myClass element that is a direct child of .dynamic . 器选择.myClass是直接子元素.dynamic 。

Option 2: Inline CSS 选项2：内联CSS

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

Option 3: Use a different class. 选项3：使用不同的类。

UPDATE UPDATE

If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax. 如果要避免以前定义的属性被以后定义的值覆盖，可以使用!important语法。

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

If I understand your question correctly, this should sort it. 如果我正确理解你的问题，这应该排序。

So you should add !important to the properties that seem to be 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

Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. 最后加载的同名css类将覆盖前一类设置的任何内容。 However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option). 但是，如果使用内联样式属性，则始终优先于css文件设置的任何内容（因此使用内联样式是一个选项）。

You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass . 您还可以使用不同的样式名称或使用标记名称div.myClass或id的#myDiv.myClass阐明您的样式。

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

问题描述

4 个解决方案

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

Updated 11.23 已更新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

Updated 11.23 已更新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