时间戳

首页 > 解决方案 > 如何覆盖已标记为 !important 的内联 CSS 从外部 HTML

javascript - 如何覆盖已标记为 !important 的内联 CSS 从外部 HTML

问题描述

我正在使用 HTML 在网站上输入基于云的 Instagram 提要。我想隐藏引用发布者网站的提要的下半部分。正在输出的内联 HTML 已经标记了 display: inline-block !important，因此尝试使用 display: none !important 或 visibility: hidden !important 隐藏它不起作用。我可以用 CSS 隐藏整个块，但不能隐藏它的“部分”。我似乎无法编辑 HTML，因为它来自云端。我在网站上实际使用的唯一 HTML 以使其呈现不包括任何内联 CSS，因为它只有两行。

有人介意解释这种事情是如何工作的，以及为什么我会遇到覆盖内联 CSS 的问题吗？

我试过使用：

display: inline !important,display: none !important和visibility: hidden !important

这些都没有获得优先权，因为 chrome 开发人员控制台中的 element.style 清楚地显示了已标记为 !important 的内联 CSS，我无权访问，也无法编辑。

我只是想在 HTML 中隐藏一个选择器。它被标记为“a”

a {
}

我曾尝试在实际元素中使用此选择器，但它也没有获得优先权。没有任何工作。

标签： javascripthtmlcss

解决方案

尝试使用 jQuery 删除内联样式

$("#myDiv2").css("transform","");//used rotate to see the effect
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="myDiv1" style="width:100px !important; height:100px !important;transform:rotate(30deg) !important">
//Some Content
</div>
<div id="myDiv2" style="width:100px !important; height:100px !important; transform:rotate(30deg) !important">
//Some Content
</div>

将样式属性的值设置为空字符串会从元素中删除该属性。

$("#myDiv2").css("transform","");

推荐阅读