删除不带jQuery的覆盖css

remove overriding css without jQuery

本文关键字：覆盖 css jQuery 删除      更新时间：2023-09-26

我添加了一个具有宽度和高度属性的图像，但它们被css类覆盖了。该类无法更改，因为它来自库，我会破坏大部分样式。一个解决方案是设置样式属性，但我不能，因为图像来自编辑器（tinyMCE）。

如何在不使用jquery的情况下使当前两个css属性无效或用image属性覆盖它们？其他解决方案也受到欢迎。

谢谢

编辑器中的html片段：

 <img src="https://crossbrowsertesting.com/design/images/cbt-sb_logo.svg" alt="" width="422" height="69">

来自调试器的样式：

md-card > img, md-card > :not(md-card-content) img {
box-sizing: border-box;    
display: -webkit-flex;    
display: -ms-flexbox;    
display: flex;    
-webkit-flex: 0 0 auto;    
-ms-flex: 0 0 auto;    
flex: 0 0 auto;    
width: 100%;    
height: auto;
}
img[Attributes Style] {    
width: 422px;    
height: 69px;
}

如前所述，我无法更改html片段，因为它是从编辑此外，图像大小会动态设置

假设您的图像是

<img src="/imgs/test.png" class="imgTest" alt="img"/>

然后在你自己的.CSS文件中，你可以给它一个属性！重要，就像这样。

.imgTest 
{
   width: 20px !important;
   height: 30px !important;
}

答案（伪代码）：将Javascript用于解决方案

var x = document.getElementsByClassName("example");
  for (var i = 0; i < x.length; i++) {
    x[i].style.width = "10px";
    x[i].style.height = "10px";
  }

jsfiddle.net/yfxpqwz

一个简单的解决方案是在预定义的css库后面包含一个外部css，这样您的css将比预定义的css更有偏好。即：

<link href="css/predefined.css" rel="stylesheet">
<link href="css/your.css" rel="stylesheet">
相关文章：