Question

我有一些javascript将html附加到div

有一个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>

CSS是：

对于客户入级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;
}

对于属于div的车辆：

#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等等

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

Answer 1

检查两个类名是否在#results div

中正确附加

Answer 2

您的div是否被追加到结果容器中？我建议从css中删除#results，看看它是如何影响它的。它可能是JavaScript如何附加而不是css。是否可以显示执行追加的JavaScript，以确保？

另外，那些css规则对我来说是一样的，只是针对这个问题或它在应用程序中的显示方式？如果它是应用程序中的方式，您可以为每个div应用第二个类，只有一个规则

Answer 3

所以我的问题消失了。

在我的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;
}

通过该评论，只有底部样式（即#results .customer，#results .customer h2和#results .customer h3才有效。

但是，如果我删除评论，或者如果我这样写/*Lorem Ipsum*/，那么它们都会有效。

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

CSS混乱。完全相似的标签，完全相似的CSS，但无法正常工作

3 个答案: