覆盖/删除内联！重要

Question

我有一个使用htmlcommentbox.com评论系统的网站。它似乎使用内联！重要信息来建立到该网站的链接。这是我正在使用的代码：

<!-- begin htmlcommentbox.com --> <div id="HCB_comment_box">Loading comments...</div> <link rel="stylesheet" type="text/css" href="htmlcommentbox.css" /> <script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=(hcb_user.PAGE || ""+window.location), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%247.bGleVasiPPOiHF49trb0"+"&opts=342&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script> <!-- end htmlcommentbox.com -->

我的CSS是：

body {
    background-color: #000;
}
p {
    color: #FFF;
}
a {
    color: #FFF;
}
span,
div a {
    display: none !important;
}

如有必要，我会加入更多内容。我可以删除指向其网站的链接吗？

Answer 1

您只需选择元素并删除style属性：

document.querySelector('.home-desc + a').removeAttribute('style');

..然后您可以使用以下CSS来隐藏它：

.home-desc + a,
.home-desc {
    display: none;
}

Example Here

或者，由于你所做的只是隐藏元素，你可以完全删除它们。

您也可以完全避免使用JS并将opacity设置为0并添加pointer-events: none。这基本上会隐藏元素。

.home-desc + a,
.home-desc {
    opacity: 0;
    pointer-events: none;
}

Example demonstrating this

Answer 2

我建议在脚本执行后从DOM中删除链接，然后你不需要删除或覆盖！important：

document.getElementById('HCB_comment_box').addEventListener('DOMSubtreeModified', function () {
    var desc = document.querySelector('#HCB_comment_box .home-desc');
    var link = document.querySelector('#HCB_comment_box .home-desc').nextSibling;
    var parent = desc.parentNode;
    parent.removeChild(desc);
    parent.removeChild(link);
});

Fiddle