Question

我试图根据它是否包含某个文本来设置与其他类（具有相同类名）不同的类的样式。我设法添加了类，但我现在面临的问题是主css类正在推翻它。代码显示：

HTML

   <div id="master">
    <div>
        <div class="attributes">
            <a href="#">Not important</a>
        </div>
    </div>
    <div>
        <div class="attributes">
            <a href="#">Not important</a>
        </div>
    </div>
    <div>
        <div class="attributes">
            <a href="#">Important Text and Other Stuff</a>
        </div>
    </div>
    <div>
        <div class="attributes">
            <a href="#">Not important</a>
        </div>
    </div>
   </div>

原创CSS

#master div.attributes {
    float: left;
    font-size: 12px;
    margin-top: 0px !important;
    width: 330px;
    clear: both;
}

.attributes {
    color: #58585a !important;
    font-size: 14px;
    margin: -10px 0 0 !important;
}

jQuery使用

$('div.attributes:contains("Important Text")').addClass('attributes2');

CSS已添加

.attributes2 

{
    clear: none;
    float: right;
    font-size: 12px;
    margin-top: 0;
    width: 330px;
}

所以它成功添加了.attributes2并使用它，但是#master div.attributes css类正在推翻它。谁能想到解决这个问题的方法呢？我做了无数的谷歌＆amp;堆栈搜索，没有运气...我应该提到我没有能力编辑HTML id＆amp;班级名称。但是我可以编辑css＆amp; jQuery的。

非常感谢。

Answer 1

这种情况正在发生，因为ID #master的优先级高于类.attributes2，它有更多specificity。因此，要解决此问题，您只需为.attributes2块添加更多特异性：

#master div.attributes2 {
...
}

另请注意，您应该使用.attributes块执行相同的操作，而不是使用!important规则，因为!important规则会中断CSS的级联性质并且难以维护代码。

Answer 2

您需要查看CSS specificity

特异性是浏览器决定哪个CSS属性的方法值与元素最相关，因此也是如此应用。特异性基于组成的匹配规则不同种类的CSS选择器。

Take a look here for more information

您必须添加更具体的css选择器。

添加以下css

#master div div.attributes2{
    clear: none;
    float: right;
    font-size: 12px;
    margin-top: 0;
    width: 330px;
}

注意：

当特异性等于多个声明中的任何一个时，   在CSS中找到的最后一个声明应用于元素。

尽管名称重复，强制div类使用不同的css类和jQuery？

2 个答案: