【问题标题】：Css class is overridden by jQueryCss 类被 jQuery 覆盖
【发布时间】：2015-12-14 11:53:17
【问题描述】：

我正在使用BigText 库来制作一些适合 div 的文本。我的问题是我应用于文本的附加样式被覆盖和忽略。例如 text-align:left 不再起作用。并且未显示列表点。如何获取脚本的功能并添加 css 类？

我这样调用 bigText 函数：

jQuery：

$(function() {
    $(window).on('resize', function() { 
        $(".area_competences_text").bigText();
    });

    $(window).trigger('resize');    
});

HTML：

<div class="area_competences_text">    
    <ul>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li>
        <li>SOME TEXT</li> 
    </ul>                               
</div>

CSS：

.area_competences_text {
    text-align: left;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

【问题讨论】：

你可以通过在你的 CSS 上使用 !important 来达到这个目的
我认为这是stackoverflow.com/questions/31750839/…的副本
避免使用 !important 标签。

标签： javascript jquery html css text

【解决方案1】：

您可以添加 !important

.area_competences_text {
    text-align: left !important;

}

【讨论】：

【解决方案2】：

您可以在不使用 css 的情况下执行此操作，如下所示：

$(function() {
        $(window).on('resize', function() { 
            $(".area_competences_text").bigText();
            $(".area_competences_text").css("text-align","left")
                                       .css("padding","5%");
        });
            $(window).trigger('resize');    
        });

【讨论】：

【解决方案3】：

我要做的是向 div 添加一个 ID 或其他类：

EX#1

HTML

<div class="area_competences_text" id="my_id"> 

                                <ul>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li> 
                                </ul>  

</div>

CSS

#my_id {
    text-align: left !important;
    padding-top: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: 5% !important;
}

EX#2

HTML

<div class="area_competences_text second_class"> 

                                <ul>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li>
                                   <li>SOME TEXT</li> 
                                </ul>  

</div>

CSS

.area_competences_text.second_class {
    text-align: left !important;
    padding-top: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: 5% !important;
}

当您添加 ID 或另一个类并同时引用这两个类时，您可以更具体地了解需要设置的样式。

【讨论】：

这不起作用，因为 jquery 添加了内联样式，它会覆盖任何 css。

【解决方案4】：

您可以将!important 添加到设置中以不被覆盖：

.area_competences_text {
    text-align: left !important;
etc.
}

【讨论】：

【解决方案5】：

你可以像下面这样使用 !important：

.area_competences_text {
    text-align: left !important;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

【讨论】：

【解决方案6】：

<div class="area_competences_text" style="text-align: left !important;">
...
</div>

【讨论】：