CSS Důležité pravidlo
Co je důležité?
Pravidlo !importantv CSS se používá k přidání větší důležitosti vlastnosti/hodnotě, než je obvyklé.
Ve skutečnosti, pokud použijete !importantpravidlo, přepíše VŠECHNA předchozí pravidla stylování pro danou konkrétní vlastnost na daném prvku!
Podívejme se na příklad:
Příklad
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
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 má vyšší specifičnost. Pravidlo !importantmá přednost
background-colorv obou případech.
Důležité O !důležité
Jediný způsob, jak přepsat !important
pravidlo, je zahrnout !important
do zdrojového kódu další pravidlo na deklaraci se stejnou (nebo vyšší) specifičností – 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 velkou šablonu stylů!
Zde jsme vytvořili jednoduchý příklad. Když se podíváte na zdrojový kód CSS, není příliš jasné, 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;
}
Tip: Je dobré o !important
pravidle vědět, můžete ho vidět v některé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ů použití !importantje, pokud musíte přepsat styl, který nelze přepsat jiným způsobem. To může být, pokud pracujete na systému správy obsahu (CMS) a nemůžete upravovat kód CSS. Poté můžete nastavit některé vlastní styly, které přepíší některé styly CMS.
Další způsob použití !importantje: Předpokládejme, že chcete speciální vzhled všech tlačítek na stránce. Tlačítka jsou zde stylizovaná s šedou barvou pozadí, bílým textem a nějakým odsazením a ohraničením:
Příklad
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Vzhled tlačítka se může někdy změnit, pokud jej vložíme do jiného prvku s vyšší specifičností, a vlastnosti se dostanou 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;
}
Abychom „vynutili“ všem tlačítkům stejný vzhled, bez ohledu na to, můžeme přidat !important
pravidlo do vlastností 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;
}