如何使用 Class CSS 覆盖内联 CSS?

Sab*_*ste 1 javascript css jquery

我正在使用 jQuery 附加一个元素,例如:

var mytop=100;
$(this).appendTo('.container')
       .last()
       .wrap('<div class="action" style="top:' + mytop + 'px;"></div>');
Run Code Online (Sandbox Code Playgroud)

只是mytop一个计算出来的数字。由于新元素有 class action,它稍后应该通过添加 class 来更改顶部moveup,例如:

$('document').on('click', function(e){
   if($(e.target).hasClass('action')){
      $(this).addClass('moveup');
   }
});
Run Code Online (Sandbox Code Playgroud)

使用 CSS 为:

.moveup{
   top:5px;
}
Run Code Online (Sandbox Code Playgroud)

问题是,附加的内联 CSS<div>覆盖了类的 CSS。当点击这个新创建的项目时,它的顶部应该设置为 5px。

如何使用类的 CSS 覆盖内联 CSS?

Mar*_*rkP 5

摘自https://css-tricks.com/snippets/css/style-override-technique/

值末尾的 !important 规则将覆盖该属性的任何其他样式声明,包括内联样式。

p { 
    font-size: 24px !important; 
}
Run Code Online (Sandbox Code Playgroud)