Reguła !important w CSS
- Poprzednia strona Specyficzność CSS
- Następna strona Funkcje matematyczne CSS
Co to jest !important?
W CSS !important Zasady mają wyższą priorytetowość niż zwykłe style.
W rzeczywistości, jeśli użyłeś !important Zasady, które pokrywają wszystkie poprzednie zasady stylu dla tego konkretnego atrybutu!
Oto przykład:
Przykład
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Wyjaśnienie przykładu
W powyższym przykładzie, wszystkie trzy akapity będą miały czerwony kolor tła, mimo że selektor ID i klasowy ma wyższą specyficzność.!important Zasady pokrywają obie te przypadki atrybutu background-color.
Ważne informacje o !important
nadpisanie !important Jedynym sposobem na pokrycie zasad jest umieszczenie w kodzie źródłowym kolejnej deklaracji o tej samej (lub wyższej) specyficzności !important Zasady - to jest początek problemu! To sprawia, że kod CSS staje się chaosem, a debugowanie staje się trudniejsze, zwłaszcza w przypadku dużych arkuszy stylów!
Tutaj tworzymy prosty przykład. Kiedy przeglądasz kod źródłowy CSS, nie jest jasne, który kolor uważany jest za najważniejszy:
Przykład
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Wskazówka:Zrozumienie !important Zasady są dobre. Możesz zobaczyć je w źródłach CSS. Ale, oprócz przypadków, gdy naprawdę musisz go użyć, nie używaj go.
Może być kilka przypadków użycia !important w sposób racjonalny
Inny sposób użycia !important W przypadku, gdy musisz nadpisać styl, który nie można nadpisać w inny sposób. Może to wynikać z tego, że używasz systemu zarządzania treścią (CMS) i nie możesz edytować kodu CSS. W takim przypadku możesz ustawić niektóre niestandardowe style, aby nadpisać pewne style CMS.
Inny sposób użycia !important W przypadku, gdy chcesz, aby wszystkie przyciski na stronie miały specjalny wygląd. W tym przypadku, styl przycisku ma szary kolor tła, biały tekst oraz pewne wewnętrzne marginesy i ramki:
Przykład
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Jeśli umieścimy przycisk w innym elemencie o wyższej specyficzności, wygląd przycisku może się zmienić, a mogą wystąpić konflikty w atrybutach. Oto przykład:
Przykład
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Aby „wymusić” identyczny wygląd wszystkich przycisków w każdej chwili, możemy dodać !important Dodaj reguły do właściwości przycisku, tak jak pokazano poniżej:
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;
}
- Poprzednia strona Specyficzność CSS
- Następna strona Funkcje matematyczne CSS
