CSS !tärkeä ominaisuus


Sisällysluettelo

    Näytä sisällysluettelo


Mikä on tärkeää?

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ä:

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>


Esimerkki selitetty

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.


Tärkeää Tietoja !tärkeästä

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ä:

Esimerkki

 #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.



Ehkä yksi tai kaksi kohtuullista käyttöä !tärkeää

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:

Esimerkki

 .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ä:

Esimerkki

 .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ä:

Esimerkki

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