Comment remplacer !important ?

Question

J'ai créé une feuille de style personnalisée qui remplace la feuille de style CSS originale pour mon modèle Wordpress. Toutefois, sur ma page de calendrier, la feuille de style CSS d'origine définit la hauteur de chaque cellule du tableau avec la balise !important déclaration :

td {height: 100px !important}

Y a-t-il un moyen de contourner ce problème ?

Answer 1

Remplacer le modificateur !important

1. Il suffit d'ajouter une autre règle CSS avec !important et donner au sélecteur une plus grande spécificité (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 moment ultérieur à celui de la règle existante (en cas d'égalité, la dernière définie l'emporte).

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

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

Ou ajouter le même sélecteur après celui qui existe déjà :

td {height: 50px !important;}

Avis de non-responsabilité :

Ce n'est presque jamais une bonne idée d'utiliser !important . Il s'agit d'une mauvaise ingénierie de la part des créateurs du modèle WordPress. De manière virale, cela oblige les utilisateurs du modèle à ajouter leurs propres !important pour le remplacer, et il limite les options pour le remplacer via JavaScript.

Mais, il est utile de savoir comment pour l'ignorer, si vous devez parfois le faire.

Answer 2

Le site !important ne doit être utilisé que lorsque vous avez des sélecteurs dans votre feuille de style avec des conflits d'intérêts. spécificité .

Mais même lorsque 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 un class dans votre HTML que vous pouvez utiliser pour créer un sélecteur plus spécifique qui n'a pas besoin de la balise !important règle.

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

Personnellement, je n'utilise jamais !important dans mes feuilles de style. N'oubliez pas que le C de CSS est pour cascading. Utilisation de !important va casser ça.

Answer 3

Avis de non-responsabilité : évitez à tout prix !important.

Il s'agit d'une astuce très sale, mais vous pouvez remplacer un !important, sans !important, en utilisant une animation (à boucle infinie ou de très longue durée) sur la propriété dont 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>

Answer 4

Voici une leçon rapide sur l'importance des CSS. J'espère que ce qui suit vous aidera !

Tout d'abord, chaque partie du nom du style est pondérée. Ainsi, plus vous avez d'éléments qui se rapportent à ce style, plus il est important. Par exemple

#P1 .Page {height:100px;}

est plus important que :

.Page {height:100px;}

Ainsi, lorsque vous utilisez important, idéalement, cela ne devrait être utilisé que lorsque c'est vraiment nécessaire. Pour annuler la déclinaison, il faut donc rendre le style plus spécifique, mais aussi l'annuler. Voir ci-dessous :

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

J'espère que cela vous aidera ! !!

Answer 5

Remplacer par JavaScript

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

Ça a marché pour moi.