Почему не исчезает картинка?

[jaroslav.tavgen]

Хочу на этом сайте https://zety.com/resume-templates (у себя в браузере) убрать картинку слева (треугольники под словом "zety").

Набираю в консоли

[].forEach.call(document.getElementsByTagName("div"), a=>{a.style.backgroundImage = "none"});

после чего он даже в HTML-коде пишет:

<div class="grid" style="background-image: none;">

однако картинка никуда не исчезает.

И консоль показывает следующий CSS:

.jumbotron>div:before {
    top: 0;
    left: -8rem;
    width: 17.6rem;
    height: 11.3rem;
    background-image: url([url]https://cdn-images.zety.com/images/zety/landings/templates/introduction-left.png);[/url]
    background-size: auto 11.3rem;
}

только все строки, кроме " background-image: url(https://cdn-images.zety.com/images/zety/landings/templates/introduction-left.png);" зачёркнуты.

Почему картинка не исчезает, и инлайновая надпись style="background-image: none;" просто игнорируется?

[Aetae]

Разницу меж div и div:before чуешь?

[jaroslav.tavgen]

Разницу меж div и div:before чуешь?

Теперь да И какое тогда может быть решение?

[].forEach.call(document.getElementsByTagName("div:before"), a=>{a.style.backgroundImage = "none"});

не работает

[Aetae]

Из js - добавить на страницу <style>, переписывающий соответствующее правило. Или, если стили грузятся с того же домена, убрать правило напрямую из cssRules.

[jaroslav.tavgen]

Из js - добавить на страницу <style>, переписывающий соответствующее правило. Или, если стили грузятся с того же домена, убрать правило напрямую из cssRules.

Спасибо большое! Получилось следующим кодом:

var style = document.createElement('style');
  style.innerHTML = `
.jumbotron>div:before {
    top: 0;
    left: -8rem;
    width: 17.6rem;
    height: 11.3rem;
    
    background-size: auto 11.3rem;
}  `;
  document.head.appendChild(style);

[рони]

jaroslav.tavgen,

const style = document.createElement('style');
   style.textContent = `.jumbotron>div:before {
    background-image: none;
   }`;
   document.body.append(style);

[jaroslav.tavgen]

Но возник другой вопрос: почему не работает это?

var style = document.createElement('style');
style.innerHTML = `
div:before {
background-image: none;
}`;
document.head.appendChild(style);

и это:

const style = document.createElement('style');
   style.textContent = `div:before {
    background-image: none;
   }`;
   document.body.append(style);

Когда я этот код ввожу, картинка не исчезает. Частное правило (".jumbotron>div:before") имеет приоритет над общим ("div:before") даже если последнее было добавлено позже?

[рони]

jaroslav.tavgen,
читать про веса селекторов.

[рони]

jaroslav.tavgen,
Взвешиваем селекторы CSS

[Aetae]

Ну и если вы делаете какой-то юзерскрипт, а не в прод, то можно не заморачиваться и просто писать !important.
Особый хак, для случаев когда прописан тяжёлый селектор да ещё и с !important и его надо подменить - просто добавьте :not([x]) - столько раз, сколько надо, чтобы перевесило.)