CSS !důležitá vlastnost

Obsah

Co je důležité?

Pravidlo !important v CSS se používá k přidání větší důležitosti vlastnosti/hodnotě než obvykle.

Ve skutečnosti, pokud použijete pravidlo !important, přepíše VŠECHNA předchozí pravidla stylingu. konkrétní vlastnost na tomto prvku!

Podívejme se na příklad:

Příklad

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

Zkuste to sami →

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

Příklad vysvětlen

V příkladu výše. všechny tři odstavce získají červenou barvu pozadí, i když selektor ID a selektor třídy mají vyšší specifičnost. Pravidlo !important přepíše vlastnost background-color v obou případech.

Důležité O !důležité

Jediný způsob, jak přepsat !important pravidlo je zahrnout další !important pravidlo o deklaraci se stejnou (nebo vyšší) specifičností ve zdrojovém kódu - a zde začíná problém! Díky tomu je kód CSS matoucí a ladění bude obtížné, zvláště pokud máte velký seznam stylů!

Zde jsme vytvořili jednoduchý příklad. Když se podíváte, není to příliš jasné zdrojový kód CSS, která barva je považována za nejdůležitější:

Příklad

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

Zkuste to sami →

<!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: Je dobré vědět o !important pravidlo. Můžete to vidět v nějakém zdrojovém kódu CSS. Nepoužívejte jej však, pokud to absolutně nemusíte.

Možná jedno nebo dvě spravedlivé použití !důležité

Jedním ze způsobů, jak použít !important, je přepsat styl, který nelze přepsat jiným způsobem. To by mohlo být, pokud jste pracuje na systému správy obsahu (CMS) a nemůže upravovat kód CSS. Poté můžete nastavit některé vlastní styly, které přepíší některé styly CMS.

Další způsob použití !important je: Předpokládejme, že chcete speciální vzhled všech tlačítek na stránce. Tlačítka jsou zde stylizovaná šedou barvou barva pozadí, bílý text a některé výplně a ohraničení:

Příklad

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

Zkuste to sami →

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

Vzhled tlačítka se může někdy změnit, pokud jej vložíme do jiného prvku vyšší specifičnost a vlastnosti se dostávají do konfliktu. Zde je příklad:

Příklad

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

Zkuste to sami →

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

Abychom „vynutili“ všem tlačítkům stejný vzhled, bez ohledu na to, můžeme přidat !important pravidlo pro vlastnosti tlačítka takto:

Příklad

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

Zkuste to sami →

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