CSS приоритет над важным?

Question

У меня есть интерфейс сайта, где другой программист использовал встроенный! Важный тег где-то много php файлов, поэтому я не могу отследить его, чтобы изменить размер отступа. У меня осталась пользовательская таблица стилей внешнего интерфейса, чтобы заменить ее на! Важный. Но это уже важно! Как это изменить?

Оригинал HTML & CSS:

<ul class="the_champ_facebook_share" style="padding: 7.35px 0 !important;"> .... </ul>

Я хочу этот:

.the_champ_facebook_share {
    padding: 0px !important;
}

Answer 1

Вы можете использовать jQuery для достижения этого.

Однако, как @Roko C. Комментарий Бульяна, использование !important не очень хороший способ. Так что вам просто нужно inline style без !important, как показано ниже.

Выход

$(".the_champ_facebook_share").attr('style', 'padding: 0px');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="the_champ_facebook_share" style="padding: 7.35px 0 !important;"> <li>123</li> </ul>

Answer 2

Ваш css недействителен, используйте этот:

.the_champ_facebook_share {
  padding: 0 !important;
}

Это не решит проблему, потому что встроенный стиль более важен. Вам, безусловно, нужно будет удалить его из html.

. Как указано @ Phong , вы сможете динамически обновлять стиль, используя javascript. Это определенно не очень хорошая практика -> действительно излишне. Хорошо бы найти во всех ваших файлах (очень просто с помощью c IDE) слово the_champ_facebook_share, а затем удалить этот встроенный стиль.

Answer 3

Добавьте id в этот ul, а затем добавьте в него стиль. Он может переопределить ваше свойство! Important, поскольку идентификатор имеет больший приоритет, чем класс.

#new_facebook_champ{
padding: 7.35px 0 !important;
}
.the_champ_facebook_share{
padding: 0 !important;
}

<ul class="the_champ_facebook_share" id="new_facebook_champ"> .... </ul>

Answer 4

Похоже, вы написали неправильно, вот как пишется синтаксис CSS:

Следовательно,

.the_champ_facebook_share {
  padding: 0 !important;
}