Как переопределить встроенный стиль, который, по-видимому, установлен javascript?

Question

На этой странице изображена http://www.robertsroofing.com/services-view/leak-repair/ апельсиновая капелька воды над фотографией. Я хочу скрыть это (display: none), но не может показаться, что он нацелен через 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, независимо от того, насколько определен ваш селектор.

Есть 2 способа вы можете исправить это. 1 в вашем CSS, просто добавьте !important, чтобы заставить переопределение стиля:

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

или, если вы хотите придерживаться метода JQuery, исправить селектор целевой правильный класс - у вас есть опечатка в ' эскиз. Кроме того, вы должны использовать функцию «css», а не полностью переопределять атрибут «style».

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

или просто использовать метод hide

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