Question

我正在使用HTML在网站上输入基于云的instagram feed。我想隐藏引用发布者网站的feed的下半部分。正在输出的内联HTML已经显示：inline-block！important已标记，因此尝试通过显示隐藏它：none！important或可见性：hidden！important不起作用。我可以用CSS隐藏整个块，但不能隐藏它的“部分”。我似乎无法编辑HTML，因为它来自云。我在网站上实际使用的唯一HTML以使其呈现，因为它只有两行，所以不包含任何内联CSS。

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

我尝试使用：

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

这些都不是优先级，因为chrome开发者控制台中的element.style清楚地显示了已经标记为！important的内联CSS，我无权访问，也无法编辑。

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

a {
}

我尝试在实际元素中使用此选择器，但它也不获得优先级。什么都没用。

Answer 1

尝试使用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","");

Answer 2

通常，唯一的方法是在选择器中更具体，例如选择a[href][style]比a更具体。但是，由于这是内联样式，并且已经使用了!important，因此您可能很不幸！

a[href][style]{
  color: green !important;
}

<a href="#" style="color: red !important;">This link uses !important</a>
<br/>
<a href="#" style="color: red;">This link does not</a>

如果您只想删除链接而不导入几千行jQuery代码，则可以只用几行纯JS选择并删除所有<a>标签。

document.querySelectorAll('a').forEach(link => {
  link.remove();
});

<p> here is some text
  <a href="#" style="color: red !important;">This link uses !important</a>
  <br/>
  <a href="#" style="color: red;">This link does not</a>
 and some more text
</p>

如何覆盖已经从外部HTML标记为！important的内联CSS

2 个答案: