CSS:n !important
-sääntöä käytetään lisäämään ominaisuutta/arvoa normaalia enemmän.
Itse asiassa, jos käytät !important
-sääntöä, se ohittaa KAIKKI aiemmat tyylisäännöt. tietty ominaisuus kyseisessä elementissä!
Katsotaanpa esimerkkiä:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Kokeile itse →
<!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>
Yllä olevassa esimerkissä. kaikki kolme kappaletta saavat punaisen taustavärin, vaikka ID-valitsimella ja luokanvalitsimella on korkeampi spesifisyys. !important
-sääntö ohittaa background-color
-ominaisuuden molemmissa tapauksissa.
Ainoa tapa ohittaa !tärkeä
sääntönä on sisällyttää toinen !tärkeä
sääntö ilmoituksesta, jolla on sama (tai korkeampi) spesifisyys lähdekoodissa - ja tästä ongelma alkaa! Tämä tekee CSS-koodista hämmentävän ja virheenkorjaus on vaikeaa, varsinkin jos sinulla on iso tyylilehti!
Tässä olemme luoneet yksinkertaisen esimerkin. Se ei ole kovin selvää, kun katsoo CSS-lähdekoodi, jonka väriä pidetään tärkeimpänä:
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Kokeile itse →
<!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>
Vinkki: On hyvä tietää !tärkeästä
sääntö. Saatat nähdä sen jossain CSS-lähdekoodissa. Älä kuitenkaan käytä sitä, ellei sinun ole aivan pakko.
Yksi tapa käyttää !tärkeää
-toimintoa on, jos sinun on ohitettava tyyli, jota ei voi ohittaa millään muulla tavalla. Tämä voi olla, jos olet työskentelet sisällönhallintajärjestelmässä (CMS) etkä voi muokata CSS-koodia. Sitten voit asettaa mukautettuja tyylejä ohittamaan jotkin CMS-tyyleistä.
Toinen tapa käyttää !tärkeää
:ta on: Oletetaan, että haluat erityisen ilmeen kaikille sivun painikkeille. Tässä painikkeet on muotoiltu harmaalla taustaväri, valkoinen teksti sekä täyttö ja reunus:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Kokeile itse →
<!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>
Painikkeen ulkoasu voi joskus muuttua, jos laitamme sen toisen elementin sisään korkeampi spesifisyys, ja ominaisuudet joutuvat ristiriitaan. Tässä on esimerkki tästä:
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Kokeile itse →
<!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>
Voimme "pakottaa" kaikki painikkeet näyttämään samalta, olipa mitä tahansa, lisäämällä !tärkeää
sääntö painikkeen ominaisuuksiin, kuten tämä:
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
Kokeile itse →
<!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>