Html CSS混乱。完全相似的标签，完全相似的CSS，但不能正常工作

我有一些将html附加到div的javascript

有一个if循环，它用完全相似的数据附加div，不同之处在于类名。因此，要么附加此标记：

<div class="customer" id="0"><h2>Lorem Ipsum</h2><h3>testing</h3></div>

<div class="vehicle" id="0"><h2>Lorem Ipsum</h2><h3>testing</h3></div>

对于分类为div的车辆：

#results .customer{
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .customer h2{
    font-size: 2.5em;
}
#results .customer h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}

#results .vehicle{
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .vehicle h2{
    font-size: 2.5em;
}
#results .vehicle h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}

基本上它们都是一样的。但只有一个可以正常工作，即CSS文件中位置较低的那个

因此，在这里，当添加车辆分类div时，它会正确显示。但是，如果附加了客户分类的div，则不会。如果我剪切用于车辆分类的div的CSS并将其粘贴到客户分类的CSS之上，则会发生相反的情况

我知道CSS根据一种方法计算CSS规则的优先级，在这种方法中，内联规则获得最大点数，然后是内部样式，然后是外部样式，在外部，id为1000点，标记为100点……等等

---

类似的，但是当我有单独的类名时，怎么会有冲突呢。发生了什么事？

检查两个类名是否正确地追加到

#results

div

您的div是否追加到results容器中？我建议将#结果从css中删除，看看这会产生什么影响。这可能是JavaScript附加的方式，而不是css。是否可以显示执行附加操作的JavaScript，以确保安全

而且，这些css规则在我看来是相同的，这只是为了这个问题，还是它在应用程序中是如何出现的？如果应用程序中是这样的话，你可以对每个div应用第二个类，只需一条规则，这样我的问题就解决了

在我的CSS文件中，CSS上方有一条注释。不幸的是，我没有按照正确的CSS注释语法输入HTML注释。这妨碍了它的直接风格

<!--Lorem Ipsum-->
#results .vehicle {
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .vehicle h2{
    font-size: 2.5em;
}
#results .vehicle h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}
#results .customer{
    height: 60px;
    padding-top: 18px;
    margin: 10px 0px;
    border-bottom: 20px solid black;
}
#results .customer h2{
    font-size: 2.5em;
}
#results .customer h3{
    width: 90%;
    text-align: right;
    float: right;
    font-size: 1.5em;
    margin-top: 15px;
    margin-right: 15px;
}

#结果：车辆{
高度：60px；
填充顶部：18px；
利润率：10px 0px；
边框底部：20px纯黑；
}
#结果：车辆h2{
字号：2.5em；
}
#结果：车辆h3{
宽度：90%；
文本对齐：右对齐；
浮动：对；
字号：1.5em；
边缘顶部：15px；
右边距：15px；
}
#结果：客户{
高度：60px；
填充顶部：18px；
利润率：10px 0px；
边框底部：20px纯黑；
}
#结果：客户h2{
字号：2.5em；
}
#结果：客户h3{
宽度：90%；
文本对齐：右对齐；
浮动：对；
字号：1.5em；
边缘顶部：15px；
右边距：15px；
}

有了这个注释，只有底部的样式，即

#results.customer

、

#results.customer h2

和

#results.customer h3

，才有效

但是如果我删除注释，

，或者如果我像这样写

/*Lorem Ipsum*/

，它们都可以工作

---

我也责怪我的IDE，颜色配置文件使评论看起来没有干扰。

你能创建一个提琴吗？这些样式必须与HTML中的

.vehicle

和

.customer

类一起使用。@panther我试过了，但是因为这里很清楚，小提琴也能正常工作。我正在使用的Webapp是由其他人制作的，我正在尝试编辑它。我想，如果有人能解释这种行为背后的原理，我就能弄明白一些事情。问题中的一套规则不会影响第二套规则。您提供的信息很好，但所讨论的HTML/CSS是正确的，并且有效。@KheemaPandey id可以重复，但不能重复recommended@Rusty-重复ID会使DOM无效，而不仅仅是“不推荐。一旦标记无效，那么针对这些元素的CSS和javascript的结果是不可预测的。结果未定义。每当您遇到类似这样的奇怪问题时，首先要做的就是验证您的DOM。它们是，而且必须是，因为它们都是单独工作的，这取决于文件底部是谁的CSS。是的。它被附加到

中。再给我一分钟，我会尝试你的建议并回复。更改Javascript为附加的html提供一个公共类，并在CSS中使用该类名会使它完全忽略CSS。这两个分区都没有规则，这似乎很奇怪。撤消该操作并从css规则中删除#结果，看看是否有帮助。我会在几分钟后发布一个提琴，当我有权访问一台电脑时，如果到时候它还没有应答的话