Comment remplacer! Important?

J'ai créé une feuille de style personnalisée qui remplace le CSS d'origine pour mon modèle Wordpress. Cependant, sur ma page de calendrier, le CSS d'origine a la hauteur de chaque cellule de tableau définie avec la !importantdéclaration:

td {height: 100px !important}

Existe-t-il un moyen de contourner cela?

Remplacer le modificateur! Important

1. Ajoutez simplement une autre règle CSS avec !importantet donnez au sélecteur une spécificité plus élevée (en ajoutant une balise, un identifiant ou une classe supplémentaire au sélecteur)
2. ajouter une règle CSS avec le même sélecteur à un point ultérieur que celui existant (dans une égalité, le dernier défini gagne).

Quelques exemples avec une spécificité plus élevée (le premier est le plus élevé / remplace, le troisième est le plus bas):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Ou ajoutez le même sélecteur après celui existant:

td {height: 50px !important;}

Avertissement:

Ce n'est presque jamais une bonne idée à utiliser !important. C'est une mauvaise ingénierie par les créateurs du modèle WordPress. De manière virale, il oblige les utilisateurs du modèle à ajouter leurs propres !importantmodificateurs pour le remplacer, et il limite les options pour le remplacer via JavaScript.

Mais, il est utile de savoir comment le remplacer, si vous devez parfois le faire.

Le !importantne doit être utilisé que lorsque vous avez des sélecteurs dans votre feuille de style avec une spécificité conflictuelle .

Mais même lorsque vous avez une spécificité conflictuelle, il est préférable de créer un sélecteur plus spécifique pour l'exception. Dans votre cas, il est préférable d'avoir un classcode HTML que vous pouvez utiliser pour créer un sélecteur plus spécifique qui n'a pas besoin de la !importantrègle.

td.a-semantic-class-name { height: 100px; }

Personnellement, je n'utilise jamais !importantdans mes feuilles de style. N'oubliez pas que le C en CSS est destiné à la cascade. L'utilisation !importantrompra cela.

Avertissement: Évitez! Important à tout prix.

C'est un hack sale, sale, mais vous pouvez remplacer une! Important, sans! Important, en utilisant une animation (en boucle infinie ou très longue durée) sur la propriété sur laquelle vous essayez de remplacer les importants.

@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>

D'accord, voici une brève leçon sur l'importance CSS. J'espère que ce qui suit aide!

Tout d'abord, chaque partie du style est nommée pondération, donc plus vous avez d'éléments liés à ce style, plus il est important. Par exemple

#P1 .Page {height:100px;}

est plus important que:

.Page {height:100px;}

Donc, lorsque vous utilisez important, idéalement, cela ne devrait être utilisé que lorsque cela est vraiment nécessaire. Donc, pour outrepasser la decleration, rendez le style plus spécifique, mais aussi avec un override. Voir ci-dessous:

td {width:100px !important;}
table tr td .override {width:150px !important;}

J'espère que ça aide!!!

Remplacer à l'aide de JavaScript

$('.mytable td').attr('style', 'display: none !important');

A travaillé pour moi.

Cela peut aussi aider

td[style] {height: 50px !important;}

Cela remplacera tout style en ligne

Dans tous les cas, vous pouvez remplacer heightavec max-height.

Je voudrais ajouter une réponse à cela qui n'a pas été mentionnée, car j'ai essayé tout ce qui précède en vain. Ma situation spécifique est que j'utilise sémantique-ui, qui a construit des !importantattributs sur des éléments (extrêmement ennuyeux). J'ai tout essayé pour le remplacer, seulement à la fin une chose a fonctionné (en utilisant jquery). C'est comme suit:

$('.active').css('cssText', 'border-radius: 0px !important');