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

Question

I am using HTML to input a cloud-based instagram feed on a website. I want to hide the bottom half of the feed that references the website of the publisher. The inline HTML that is outputting already has display: inline-block !important marked, so trying to hide it with display: none !important or visibility: hidden !important do not work. I am able to hide the entire block with CSS but not "parts" of it. I don't seem to be able to edit the HTML since it is coming from the cloud. The only HTML that I actually use on the site in order to make it render does not include any of the inline CSS, as it is only two lines.

Would someone mind explaining how this kind of thing works and why I am encountering issues overriding the inline CSS?

I have tried using:

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

None of these are receiving priority, as the element.style in the chrome developer console clearly shows the inline CSS already marked as !important that I do not have access to, nor can I edit.

I simply want to hide one selector within the HTML. It is marked as "a"

a {
}

I have tried using this selector within the actual element, but it does not receive priority either. Nothing is working.

Answer 1

Try to remove the inline style with 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> 

Setting the value of a style property to an empty string removes that property from an element.

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

Answer 2

Typically the only way to do this is to be more specific in your selector, for example selecting a[href][style] is more specific than just a . But since this is inline styles and already using !important you unfortunately might be out of luck!

 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> 

If you wanted to just remove the links without importing several thousand lines of jQuery code, you can select and remove all <a> tags with just a few lines of plain JS.

 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>