如何覆蓋已經從外部HTML標記為！important的內聯CSS

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>