在 css/html 中停用 "element.style"？

Question

我在 Chrome 开发人员工具的 "style" 选项卡中看到此 css 代码 window:

element.style {
    height: auto;
    width: 100%;
    margin-top: -148px;
}

我想用我的 .css 文件中的 css 代码覆盖它：

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
    width: auto;
    height: 244px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
}

但是 element.style 的样式定义已经存在。我不能这么快找到 .js。有人能帮我吗？谢谢

Answer 1

你总是可以选择：

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto !important;
height: 244px !important;
margin-top: 0px !important;
margin-left: auto;
margin-right: auto; 
}

重要样式会覆盖内联样式，除非内联样式也有 !important 子句（但这实际上很少见）。

Answer 2

当然，您可以删除元素上的 style 属性：

element.removeAttribute('style');

如果 element.style 消失，您的 CSS 文件的规则将可见。

Answer 3

您可以在每个样式的末尾添加 !important。

例如使用这个：

height: 244px !important;

而不是

height: 244px;

Answer 4

您在 chrome 开发人员 window 中看到的 element style 是元素上的样式，写成 inline

element.style {
 /*this all are the inline written styles*/
}

现在说到 But with this codes the element.style is allready there 由于 CSS 优先级 ，您无法覆盖样式。在这种情况下，规则是 内联 CSS 比外部 CSS

具有更高的优先级

那你能做什么呢？？

你必须 remove the inline css 在它写的地方。这样你的外部 css 将适用
如果您出于某种原因无法修改内联 CSS，那么唯一的选择是在您的外部 CSS 文件中 set the styles as !important。这里的人已经提到了这个解决方案，但并不总是推荐这个。
把写在那个元素上的所有内联 CSS 并在你的外部文件中创建一个新的 class 然后把它放在那里，现在给这个 class元素的名称。所以原来的样式被应用回来了。现在是您必须覆盖的新样式的重点。还有使用 2 classes 时新的 CSS 优先级规则。 CSS rule which is read last (in the css file, not the order you put in the element) will have priority。因此，请确保将新的 CSS 规则放在您刚刚创建的其他 class 之下，如上所述。
- 如果你必须使用 2 个单独的文件来编写这 2 个 classes 怎么办？？然后是另一个 CSS 优先级规则。 The file that is placed last in the DOM will have the priority（记住它不是在文件加载到 DOM 时，而是它在 DOM 中的位置）

在 css/html 中停用 "element.style"？

Deactivate "element.style" in css/html?

html

javascript

css

siteorigin