Question

我试图覆盖课堂风格，但我无法弄清楚如何去做。我知道jQuery中可用的addClass函数来添加一个类，但我找不到任何覆盖类的样式而不是整个类的函数。

有没有办法可以覆盖样式？

Answer 1

通过使用jQuery的addClass（）函数和特殊化的CSS规则（这里样式表中的类更具特异性），您可以覆盖单个样式规则：

$('.box').click(function(){
    $('.box').addClass('yellow');  
});

.box{
    width:200px;
    height:200px;
    background:lightblue;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}

.yellow{
    background-color:yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">Click Me!<div>

Answer 2

为了覆盖类的特定样式，您可以添加另一个类并将其分配给您的项目。例如，如果你有一个类 -

.new-item {
    background-color: #e1e1e1;
    border-bottom: 1px solid #ccc;
}

然后你可以写另一个类 -

.updated-item {
    background-color: white !important;
}

然后使用jQuery简单地addClass('updated-item')到你的项目。

Answer 3

只需提供新风格

$("body").css("background-color", "red");

演示：

function Change() {
    $("body").css("background-color", "black");
}

body {
  background-color: red;
  color: #0000ff;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>This is some paragraph text</p>
<button onclick="Change()">Change bgcolor without affecting other styles</button>

Answer 4

要覆盖CSS规则，您需要了解CSS特性。类比具有比内联CSS更低特异性的ID具有更低的特异性。

使用jQuery的.css()函数添加内联CSS或向该元素添加ID或使用!important。

Answer 5

可以在没有jQuery函数的情况下覆盖样式根据以下优先级应用样式：

单独CSS文件上的样式

.className{
  color:#eee;
}

样式排序

.className{
  color:#eee;
}
.className{
  color:#fff; /* this will override the previous one */
}

更具体的选择器

#id.className{
  color:#fff;
}

重要

#id.className{
  color:#000 !important;
}

头标记

样式

<style>
  .className{
    color:#000 !important;
  }
</style>

内联样式

<p style='color:#ff0;'>Hello World!</p>

如何使用jquery覆盖类的CSS样式？

5 个答案: