CSS !ważna zasada
Co jest ważne?
Reguła !importantw CSS służy do nadania większej ważności właściwości/wartości niż zwykle.
W rzeczywistości, jeśli użyjesz tej !importantreguły, zastąpi ona WSZYSTKIE poprzednie reguły stylizacji dla tej konkretnej właściwości tego elementu!
Spójrzmy na przykład:
Przykład
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Przykład wyjaśniony
W powyższym przykładzie. wszystkie trzy akapity otrzymają czerwony kolor tła, mimo że selektor identyfikatora i selektor klasy mają wyższą szczegółowość. W obu przypadkach !importantreguła ma pierwszeństwo przed właściwością.
background-color
Ważne o !ważne
Jedynym sposobem na obejście !important
reguły jest umieszczenie innej !important
reguły na deklaracji o tej samej (lub wyższej) szczegółowości w kodzie źródłowym - i tu zaczyna się problem! To sprawia, że kod CSS jest mylący, a debugowanie będzie trudne, zwłaszcza jeśli masz duży arkusz stylów!
Tutaj stworzyliśmy prosty przykład. Nie jest jasne, kiedy spojrzysz na kod źródłowy CSS, który kolor jest uważany za najważniejszy:
Przykład
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Wskazówka: Warto wiedzieć o !important
regule, możesz ją zobaczyć w jakimś kodzie źródłowym CSS. Jednak nie używaj go, chyba że absolutnie musisz.
Może jedno lub dwa dozwolone użycie słowa „ważne”
Jednym ze sposobów użycia !importantjest przesłonięcie stylu, którego nie można zmienić w żaden inny sposób. Może tak być, jeśli pracujesz w systemie zarządzania treścią (CMS) i nie możesz edytować kodu CSS. Następnie możesz ustawić niestandardowe style, aby zastąpić niektóre style CMS.
Innym sposobem użycia !importantjest: Załóżmy, że chcesz mieć specjalny wygląd wszystkich przycisków na stronie. Tutaj przyciski są stylizowane na szary kolor tła, biały tekst oraz trochę dopełnienia i obramowania:
Przykład
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Wygląd przycisku może się czasem zmienić, jeśli umieścimy go w innym elemencie o wyższej szczegółowości, a właściwości będą sprzeczne. Oto przykład tego:
Przykład
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Aby „zmusić” wszystkie przyciski do tego samego wyglądu, bez względu na wszystko, możemy dodać !important
regułę do właściwości przycisku, na przykład:
Przykład
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}