CQuery类被jQuery覆盖

Question

我正在使用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%;
}

Answer 1

你可以不使用下面的css来做到这一点：

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

Answer 2

您可以添加！important

.area_competences_text {
    text-align: left !important;

} 

Answer 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或其他类并引用这两个类时，您会更加具体地了解需要设置样式的内容。

Answer 4

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

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

Answer 5

你可以使用！important如下：

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

Answer 6

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