Я создал специальную таблицу стилей, которая переопределяет исходный CSS для моего шаблона Wordpress. Однако на моей странице календаря исходный CSS имеет высоту каждой ячейки таблицы с объявлением !important:
td {height: 100px !important}
Есть ли способ переопределить это?
Просто добавьте еще одно правило CSS с помощью !important и дайте селектору более высокую специфичность (добавив дополнительный тег, id или класс в селектор) или добавьте правило CSS с тем же селектором в более позднюю точку, существующий (в галстуке, последний - определенный выигрыш).
Некоторые примеры с более высокой специфичностью:
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Или добавьте один и тот же селектор после существующего:
td {height: 50px !important;}
Почти никогда не рекомендуется использовать !important. Это плохая разработка создателей шаблона WordPress. Вирусно, он заставляет пользователей шаблона добавлять свои собственные модификаторы !important, чтобы переопределить его, и ограничивает возможности переопределения его с помощью JavaScript.
Но полезно знать, как его переопределить, если вам иногда приходится.
!important следует использовать, только если у вас есть селектор в таблице стилей с конфликтующими specificity.
Но даже если у вас есть противоречивая специфика, лучше создать более конкретный селектор для исключения. В вашем случае лучше иметь class в вашем HTML, который вы можете использовать для создания более конкретного селектора, которому не требуется правило !important.
td.a-semantic-class-name { height: 100px; }
Я лично никогда не использую !important в моих таблицах стилей. Помните, что C в CSS для каскадирования. Использование !important нарушит это.
Хорошо, это быстрый урок о важности CSS. Надеюсь, что ниже поможет!
Прежде всего, каждая часть стилей называется взвешиванием, поэтому чем больше элементов у вас есть, тем более важно это. Например
#P1 .Page {height:100px;}
важнее, чем:
.Page {height:100px;}
Поэтому, когда вы используете важные, в идеале это нужно использовать, когда это действительно необходимо. Поэтому, чтобы переопределить объявление, сделайте стиль более конкретным, но также с переопределением. См. Ниже:
td {width:100px !important;}
table tr td .override {width:150px !important;}
Надеюсь, это поможет!!!
Отказ от ответственности: избегайте важности любой ценой.
Это грязный грязный хак, но вы можете переопределить важный, без важности, с помощью (бесконечно цикличной или очень продолжительной) анимации в свойстве, которое вы пытаетесь переопределить для импорта.
@keyframes forceYellow {
from {
background-color: yellow;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red !important;
animation: 1s linear infinite forceYellow;
}<div></div>Переопределить с помощью JavaScript
$('.mytable td').attr('style', 'display: none !important');
Работал для меня.
Ура!
Это тоже может помочь
td[style] {height: 50px !important;}
Это переопределит любой встроенный стиль
Пара ответов сработала для меня здесь. Благодарю. Одна вещь, которую я должен упомянуть, это то, что из моего собственного опыта и, вероятно, из опыта большого количества людей, ищущих здесь ответ, я уверен, что большинство людей не хотят использовать! Важно, но они должны. Я использую Joomla CMS в ряде проектов, и разработчики шаблонов опрыскивают свои коды! Очень сложно обойти их код, и в файле переопределения мы используем! Важный больше раз, чем мы действительно хотим.
Я хотел бы добавить ответ на этот вопрос, о котором не упоминалось, поскольку я пробовал все вышеперечисленное безрезультатно. Моя особая ситуация заключается в том, что я использую семантический-ui, который имеет встроенные атрибуты !important на элементах (крайне раздражает). Я попробовал все, чтобы переопределить его, только в конце дела все работало (используя jquery). Это выглядит так:
$('.active').css('cssText', 'border-radius: 0px !important');