jQuery：当样式表选择器更具体时，如何使用addClass更改属性？

Question

通过某些样式表，可以专门选择标签并设置样式。 通过使用JQuery添加类，我想覆盖一个属性。但是，样式表选择器更加具体，因此添加的类中的属性无效。在这种情况下，如何使用JQuery调整属性？

在代码段中，红色文本应更改为蓝色。但是它保持红色。

应该用addClass解决。

$(document).ready(function(){
    $("button").click(function(){
        $("p:first").addClass("hero");
    });
});

p:nth-of-type(1) {
    color: red;
}

.intro {
    font-size: 150%;
    color: red;
}

.hero {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

Answer 1

只需在:not(.hero)行中添加p:nth-of-type(1)即可为我完成工作！

这样，只有在第一个p没有班级英雄的情况下，您才需要设置红色

$(document).ready(function(){
    $("button").click(function(){
        $("p:first").addClass("hero");
    });
});

p:nth-of-type(1):not(.hero) {
    color: red;
}

.intro {
    font-size: 150%;
    color: red;
}

.hero {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

Answer 2

如果您无法访问css文件，请在.hero内添加新的html样式，如下所示：

 <style>
     .hero { color: blue !important; }
 </style>

---

但是，如果您也无法访问html，请尝试以下操作以动态添加上述样式（将其添加到document.ready中）：

 var stEl = document.createElement('style'); 
 document.head.appendChild(stEl); 
 stEl.sheet.insertRule(".hero { color: blue !important; }", 0);

Answer 3

在css声明中使用../90804/90804_0.jpg ../89246/89246_8.jpg ../89247/89247_14.jpg ，然后应用它。

!important

$(document).ready(function(){
    $("button").click(function(){
        $("p:first").addClass("hero");
    });
});

p:nth-of-type(1) {
    color: red;
}

.intro {
    font-size: 150%;
    color: red;
}

.hero {
    color: blue !important;
}