Comment passer outre! 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 déclaration !important :

 td {height: 100px !important} 

Y a-t-il un moyen de remplacer cela?

Remplacement du modificateur! Important

Ajoutez simplement une autre règle CSS avec !important et donnez une spécificité supérieure au sélecteur (en ajoutant une balise, un identifiant ou une classe supplémentaire au sélecteur) ou ajoutez une règle CSS avec le même sélecteur à un moment ultérieur (dans une égalité, la dernière définie gagne).

Quelques exemples avec une spécificité plus élevée:

 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 d’utiliser !important . Ceci est une mauvaise ingénierie par les créateurs du modèle WordPress. En mode viral, cela oblige les utilisateurs du modèle à append leurs propres modificateurs !important pour le remplacer, et cela limite les options pour le remplacer via JavaScript.

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

Le !important ne devrait être utilisé que lorsque vous avez des sélecteurs dans votre feuille de style avec une spécificité contradictoire.

Mais même si vous avez des spécificités contradictoires, 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 une class dans votre code HTML que vous pouvez utiliser pour créer un sélecteur plus spécifique qui n’a pas besoin de la règle!

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

Personnellement, je n’utilise jamais !important dans mes feuilles de style. Rappelez-vous que le C en CSS est destiné à la cascade. Utiliser !important va casser ça.

Ok, voici une leçon rapide sur l’importance de CSS. J’espère que le dessous aide!

Tout d’abord, chaque partie du nom des styles est considérée comme une pondération. Plus vous avez d’éléments liés à ce style, plus c’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 vous en avez vraiment besoin. Donc, pour dépasser la déclinaison, rendez le style plus précis, mais aussi avec un remplacement. Voir ci-dessous:

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

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

Remplacer en utilisant JavaScript

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

Travaillé pour moi

À votre santé!

Cela peut aussi aider

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

Cela remplacera tout style en ligne

Disclaimer: Évitez! Important à tout prix.

Il s’agit d’un piratage sale et sale, mais vous pouvez modifier un paramètre important sans utiliser une animation (en boucle infinie ou très longue durée) sur la propriété sur laquelle vous essayez de remplacer les éléments 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; } 
 

Je voudrais append une réponse à cela qui n’a pas été mentionné, car j’ai essayé tout cela en vain. Ma situation spécifique est que j’utilise une interface utilisateur sémantique, qui contient !important atsortingbuts !important sur les éléments (extrêmement agaçants). J’ai tout essayé pour le remplacer, mais finalement, une chose a fonctionné (en utilisant jquery). C’est comme suit:

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