如何覆盖显然由javascript设置的内联样式？

Question

此页面上有一张图片http://www.robertsroofing.com/services-view/leak-repair/，特别是照片上方的橙色水滴图标。我想隐藏这个（显示：无）但似乎无法通过css进行定位。所以我也尝试在页面底部添加一些javascript，但这也不起作用。也许它没有正确定位，但我觉得我尝试了一切。

<article id="post-1975" class="post__holder post-1975 services type-services status-publish has-post-thumbnail hentry">
  <figure class="featured-thumbnail thumbnail large"><img src="http://www.robertsroofing.com/wp-content/uploads/2014/11/icon-leak-tile.png" alt="Reliable Commercial Roof Leak Repair" style="display: inline;"></figure>
</article>
    <script>
$(document).ready(function(){
 $('.type-services .thumbnail img').attr('style','display: none');
})
</script>

我确实需要专门定位父.type-services类，因为此模板与其他内容共享。我只需要在使用.type-services类时隐藏图像。

Answer 1

元素的内联样式为display: inline;。这就是你的CSS覆盖不起作用的原因。无论选择器的具体程度如何，内联样式始终优先于CSS规则。

有两种方法可以解决这个问题。 1在您的CSS中，只需添加!important以强制覆盖样式：

article.type-services figure.thumbnail > img { display: none !important; }

或者，如果您想坚持使用jquery方法，请修改您的选择器以定位正确的类 - 您在缩略图中输入了一个拼写错误。此外，你应该使用＆＃39; css＆＃39;功能，而不是完全覆盖＆＃39;风格＆＃39;属性。

$('.type-services .thumbnail img').css('display', 'none');

或只使用hide方法

$('.type-services .thumbnail img').hide();