CSS !vigtig ejendom

Indholdsfortegnelse

Hvad er !vigtigt?

Reglen !important i CSS bruges til at tilføje mere betydning til en egenskab/værdi end normalt.

Faktisk, hvis du bruger reglen !important, vil den tilsidesætte ALLE tidligere stylingregler for det specifik egenskab på det element!

Lad os se på et eksempel:

Eksempel

#myid {
  background-color: blue;
}
.myclass {
  
  background-color: gray;
}
p {
  background-color: red !important;
}

Prøv det selv →

<!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>

Eksempel forklaret

I eksemplet ovenfor. alle tre afsnit får en rød baggrundsfarve, selvom ID-vælgeren og klassevælgeren har en højere specificitet. Reglen !important tilsidesætter egenskaben baggrundsfarve i begge tilfælde.

Vigtigt om !vigtigt

Den eneste måde at tilsidesætte en !important reglen er at inkludere en anden !vigtig regel om en erklæring med samme (eller højere) specificitet i kildekoden - og her starter problemet! Dette gør CSS-koden forvirrende, og fejlretningen vil være svær, især hvis du har et stort stilark!

Her har vi lavet et simpelt eksempel. Det er ikke særlig tydeligt, når man ser på CSS-kildekoden, hvilken farve anses for vigtigst:

Eksempel

 #myid {
  background-color: blue !important;
}
.myclass {
  
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Prøv det selv →

<!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>

Tip: Det er godt at vide om !important Herske. Du kan muligvis se det i noget CSS-kildekode. Brug det dog ikke, medmindre du absolut er nødt til det.

Måske en eller to rimelige anvendelser af !vigtigt

En måde at bruge !important er, hvis du skal tilsidesætte en stil, der ikke kan tilsidesættes på nogen anden måde. Dette kunne være, hvis du er arbejder på et Content Management System (CMS) og kan ikke redigere CSS-koden. Derefter kan du indstille nogle brugerdefinerede stilarter for at tilsidesætte nogle af CMS-stilene.

En anden måde at bruge !important på er: Antag, at du ønsker et særligt udseende til alle knapper på en side. Her er knapper stylet med en grå baggrundsfarve, hvid tekst og noget polstring og kant:

Eksempel

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}

Prøv det selv →

<!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>

Udseendet på en knap kan nogle gange ændre sig, hvis vi sætter den inde i et andet element med højere specificitet, og egenskaberne kommer i konflikt. Her er et eksempel på dette:

Eksempel

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Prøv det selv →

<!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>

For at "tvinge" alle knapper til at have det samme udseende, uanset hvad, kan vi tilføje !important regel til knappens egenskaber, sådan her:

Eksempel

 .button {
  background-color: #8c8c8c !important; 
  color: white 
  !important;
  
  padding: 5px !important;
  border: 1px solid black !important; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Prøv det selv →

<!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>