Regeln !important
i CSS används för att lägga större vikt till en egenskap/värde än normalt.
Faktum är att om du använder regeln !important
kommer den att åsidosätta ALLA tidigare stilregler för det specifik egenskap på det elementet!
Låt oss titta på ett exempel:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
I exemplet ovan. alla tre stycken får en röd bakgrundsfärg, även om ID-väljaren och klassväljaren har en högre specificitet. Regeln !important
åsidosätter egenskapen background-color
i båda fallen.
Det enda sättet att åsidosätta en !important
regeln är att inkludera en annan !viktig
regel om en deklaration med samma (eller högre) specificitet i källkoden - och här börjar problemet! Detta gör CSS-koden förvirrande och felsökningen blir svår, speciellt om du har en stor stilmall!
Här har vi skapat ett enkelt exempel. Det är inte särskilt tydligt, när man tittar på CSS-källkoden, vilken färg anses vara viktigast:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p class="myclass">This is some text in a paragraph.</p>
<p id="myid">This is some text in a paragraph.</p>
</body>
</html>
Tips: Det är bra att veta om !viktigt
regel. Du kanske ser det i någon CSS-källkod. Använd den dock inte om du inte absolut måste.
Ett sätt att använda !important
är om du måste åsidosätta en stil som inte kan åsidosättas på något annat sätt. Detta kan vara om du är det arbetar på ett Content Management System (CMS) och kan inte redigera CSS-koden. Sedan kan du ställa in några anpassade stilar för att åsidosätta några av CMS-stilarna.
Ett annat sätt att använda !important
är: Antag att du vill ha ett speciellt utseende för alla knappar på en sida. Här är knappar stylade med en grå bakgrundsfärg, vit text och lite stoppning och kant:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>
</body>
</html>
Utseendet på en knapp kan ibland ändras om vi lägger den inuti ett annat element med högre specificitet, och egenskaperna kommer i konflikt. Här är ett exempel på detta:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>
För att "tvinga" alla knappar att ha samma utseende, oavsett vad, kan vi lägga till !important
regel till egenskaperna för knappen, så här:
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>
<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>
</body>
</html>