web-dev-qa-db-fra.com

Puis-je remplacer inline! Important?

Si tu as

<div style="display: none !important;"></div>

Y a-t-il un moyen de remplacer cela dans la feuille de style pour l'afficher?

De préférence en utilisant quelque chose semblable à ceci:

div { display: block !important; }
htmlcsscss-specificity
53
Jeffrey Basurto

Permettez-moi de commencer par dire que les styles généralement intégrés peuvent être remplacés}:

.override {color:red !important;}​

<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

Fiddled

Ce comportement est décrit dans les spécifications W3 , où il est indiqué que les déclarations !important ne modifient pas la spécificité, mais plutôt ont priorité sur les déclarations "normales".

Cela dit, lorsque les règles en conflit ont toutes les deux le drapeau !important, la spécificité dicte l'application d'une règle en ligne, ce qui signifie que, dans le scénario OP, il est impossible de remplacer un en ligne!important.

70
o.v.

Vous ne pouvez pas remplacer le CSS en ligne s'il contient !important. Il a une priorité plus élevée que le style de votre fichier CSS externe.

Toutefois, si vous souhaitez que certaines actions soient modifiées ultérieurement, vous pouvez utiliser un peu de JavaScript.

22
Shakti Singh

Vous ne pouvez pas remplacer le CSS en ligne ayant !important, car il a une priorité plus élevée, mais, en utilisant JavaScript, vous pouvez obtenir ce que vous voulez.

7
Ahsan Rathod

Vous ne pouvez pas remplacer le style en ligne avec !important. La première préférence est le style en ligne.

Par exemple: nous avons une classe 

.styleT{float:left;padding-left:4px;width:90px;}

et en jsp 

<div class="styleT" id="inputT" style="padding-left:0px;">

ici ne prend pas le padding-left:4px; .Il prend la classe styleT sauf le padding-left: 4px; . Il y aura padding-left:0px;. 

5
ıllıllı lק ıllıllı

Voici une solution simple de jQuery.

$(document).ready(function() { 
$('div').css('display','block');
})
3
sameeuor

Règles de priorité lorsque deux propriétés CSS s'appliquent au même nœud:

  • !important bat pas -!important. Si également! Important, ...

  • style attribut bat css dans un fichier. Si les deux sont dans des fichiers css ...

  • un identifiant dans le sélecteur CSS ne bat aucun identifiant. Et plus d'identités ont battu moins. (et vous pensiez qu'il n'y avait aucune raison d'avoir deux identifiants dans un sélecteur.) Si le même identifiant compte ...

  • Les classes ou les attributs tels que [name] dans le sélecteur les comptent; plus bat moins. Si tout cela est pareil ...

  • des noms de balises comme span ou input, plus de battements moins.

Donc, vous voyez que le !important en ligne est la priorité la plus élevée.

0
OsamaBinLogin

Vous pouvez voir cet exemple! Il existe plusieurs règles pour le sélecteur CSS. Le sélecteur le plus puissant est en ligne (si même niveau avec/sans! Important). Les suivantes: id, class, etc. Donc, si une balise est déjà stylisée par css en ligne avec! Important, vous avez juste un moyen: utilisez Javascript pour changer.

var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
  pid.style.color = '';
});
p{color:Violet !important;}

*{color:blue !important;}

html *{color:brown !important;}

html p{color:lighblue !important;}

.pclass{color:yellow !important;}

#pid{color:green !important;}
<p class="pclass" id="pid" style="color:red !important;">
Hello, stylize for me !
</p>

<button id='button'>Change color by JS</button>

Comme vous le voyez, le style par inline css a été supprimé et l'identifiant est le sélecteur le plus puissant maintenant!

0
Freelancer