Jeg har oprettet et brugerdefineret stilark, der tilsidesætter den oprindelige CSS for min Wordpress-skabelon. På min kalenderside har den originale CSS imidlertid højden af hver tabelcelle fastsat med erklæringen !important
:
td {height: 100px !important}
Er der en måde, hvorpå jeg kan tilsidesætte dette?
Du skal blot tilføje en anden CSS-regel med !important
, og enten give selektoren en højere specificitet (tilføj et ekstra tag, id eller klasse til selektoren) eller tilføje en CSS-regel med samme selektor på et senere tidspunkt end den eksisterende (ved uafgjort vinder den sidst definerede).
Nogle eksempler med en højere specificitet:
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Eller tilføj den samme selector efter den eksisterende:
td {height: 50px !important;}
Det er næsten aldrig en god idé at bruge !important
. Dette er dårlig teknik af skaberne af WordPress-skabelonen. På viral vis tvinger det brugerne af skabelonen til at tilføje deres egne !important
-modifikatorer for at tilsidesætte den, og det begrænser mulighederne for at tilsidesætte den via JavaScript.
Men det er nyttigt at vide hvordan man kan tilsidesætte den, hvis man nogle gange er nødt til det.
[!important
] (http://www.w3.org/TR/CSS21/cascade.html#important-rules) bør kun bruges, når du har selektorer i dit stilark med modstridende [specificity] (http://www.w3.org/TR/CSS21/cascade.html#specificity).
Men selv når du har modstridende specificitet, er det bedre at oprette en mere specifik selector for undtagelsen. I dit tilfælde er det bedre at have en class
i din HTML, som du kan bruge til at oprette en mere specifik selector, som ikke har brug for !important
-reglen.
td.a-semantic-class-name { height: 100px; }
Personligt bruger jeg aldrig !important
i mine stilark. Husk, at C'et i CSS er for kaskadering. Brug af !important
vil bryde dette.
Okay, her er en hurtig lektion om CSS Vigtighed. Jeg håber, at nedenstående hjælper!
Først og fremmest er hver del af stilarternes navn som en vægtning, så jo flere elementer du har, der relaterer til den pågældende stil, jo vigtigere er den. For eksempel
#P1 .Page {height:100px;}
er vigtigere end:
.Page {height:100px;}
Så når du bruger important, bør det ideelt set kun bruges, når det virkelig er nødvendigt. Så for at tilsidesætte deklerationen, skal du gøre stilen mere specifik, men også med en override. Se nedenfor:
td {width:100px !important;}
table tr td .override {width:150px !important;}
Jeg håber, at dette hjælper!!!