Co znaczy! Ważne w CSS?

409

Co !importantoznacza CSS?

Czy jest dostępny w CSS 2? CSS 3?

Gdzie jest obsługiwany? Wszystkie nowoczesne przeglądarki?

css Itay Moav-Malimovka
źródło
2
w3.org/TR/CSS2/cascade.html#important-rules
j08691
17
... coś, czego należy unikać, jeśli to możliwe.
Scott
2
możliwy duplikat Jak to czytasz! ważne w CSS? , Jakie są konsekwencje używania „! Ważne” w CSS? i zobacz także: kiedy używać! Ważna właściwość w css? , Kiedy użyć „! Ważne”, aby uratować dzień (podczas pracy z CSS)
Cody Gray

Odpowiedzi:

400

Zasadniczo oznacza to, co mówi; że „jest to ważne, zignoruj ​​kolejne reguły i wszelkie zwykłe problemy ze specyfiką, zastosuj tę regułę!”

W normalnym użyciu reguła zdefiniowana w zewnętrznym arkuszu stylów jest nadpisywana przez styl zdefiniowany w headdokumencie, który z kolei jest nadpisywany przez styl liniowy w samym elemencie (przy założeniu jednakowej specyficzności selektorów). Zdefiniowanie reguły za pomocą !important„atrybutu” (?) Odrzuca normalne obawy dotyczące reguły „późniejszej” nadrzędnej wobec „wcześniejszej”.

Zwykle bardziej szczegółowa reguła zastąpi mniej szczegółową regułę. Więc:

a {
    /* css */
}

Jest zwykle uchylany przez:

body div #elementID ul li a {
    /* css */
}

Ponieważ ten drugi selektor jest bardziej szczegółowy (i zwykle nie ma znaczenia, gdzie znajduje się bardziej szczegółowy selektor (w headzewnętrznym arkuszu stylów), nadal będzie zastępował mniej szczegółowy selektor (atrybuty stylu w linii zawsze będą nadpisuje selektor „więcej-” lub „mniej-”, ponieważ jest on zawsze bardziej szczegółowy.

Jeśli jednak dodasz !importantdo mniej szczegółowej deklaracji selektora CSS, będzie on miał priorytet.

Używanie !importantma swoje cele (choć staram się o nich myśleć), ale to tak jak używanie wybuchu nuklearnego, aby powstrzymać lisy przed zabijaniem kurczaków; tak, lisy zostaną zabite, ale kurczaki też. I okolica.

Dzięki temu debugowanie CSS jest koszmarem (osobistym, empirycznym, doświadczeniem).

David mówi, że przywraca Monikę
źródło
253
Jest to również mylące dla wielu programistów, ponieważ w wielu językach programowania prefiks! Oznacza nie .
rustyx
19
Jednym z ważnych celów jest skrypt GreaseMonkey, w którym celowo zastępujesz CSS innych osób, który prawdopodobnie jest bardziej szczegółowy niż twój.
Noumenon
1
Oficjalnie W3 nazywa to „regułą”.
JD Smith
5
przynajmniej nie jest to sarkastyczne i mówi important!(ważne NIE)
użytkownik3553260,
2
Napisałeś: „W normalnym użyciu reguła zdefiniowana w zewnętrznym arkuszu stylów jest zastępowana przez styl zdefiniowany w nagłówku dokumentu”. To jest złe.
jlguenego
130

Ważna reguła to sposób na kaskadę CSS, ale zawsze należy stosować zasady, które Twoim zdaniem są najważniejsze. Reguła, która ma właściwość! Ważne, będzie zawsze stosowana bez względu na to, gdzie reguła pojawia się w dokumencie CSS.

Jeśli masz następujące elementy:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

reguła z ważną będzie tą zastosowaną (nie licząc specyficzności )

!importantWydaje mi się, że pojawił się w CSS1, więc każda przeglądarka go obsługuje (IE4 do IE6 z częściową implementacją, IE7 + pełna)

Ponadto jest to coś, czego nie chcesz często używać, ponieważ jeśli pracujesz z innymi ludźmi, możesz zastąpić inne właściwości.

nicosantangelo
źródło
1
IE4 +, z błędami, do 6. włącznie.
BoltClock
15
Zamieszanie zdarza się, ponieważ !jest symbolem NIE w niektórych językach, ale teraz jest wyraźniejsze.
Si8
2
Szczególnie się cieszę, że dołączyłeś składnię !important. CSS różni się na tyle od innych języków, że łatwo zapomnieć, jak korzystać z niektórych rzeczy.
blainarmstrong,
3
@ Si8 - Tak, z powodu tego zamieszania zawsze myślałem, że „oni” powinni go zdefiniować jako important!, a może IMPORTANT!raczej niż !important. Zastanawiam się, czy ktokolwiek (kto mógłby to przeczytać) wie, dlaczego zdefiniował to interpunkcją z przodu? Oczywiście jest już za późno, aby to zmienić.
Kevin Fegan
22

!important jest częścią CSS1.

Obsługujące go przeglądarki: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

To znaczy coś w stylu:

Użyj mnie, jeśli w pobliżu nie ma nic ważnego!

Nie mogę tego powiedzieć lepiej.

Cyklon
źródło
5
!importantnie ogranicza się tylko do Safari 3+; obsługuje go od samego początku, jak wszystkie inne przeglądarki inne niż IE. IE rozumie to od wersji 4, ale obsługuje ją
bezbłędnie,
12

Służy do wywierania wpływu na sortowanie w kaskadzie CSS po dokonaniu sortowania według pochodzenia. Nie ma to nic wspólnego ze specyfiką, jak podano tutaj w innych odpowiedziach.

Oto priorytet od najniższego do najwyższego:

  1. style przeglądarki
  2. deklaracje arkuszy stylów użytkownika (bez! ważne)
  3. deklaracje arkuszy stylów autorskich (bez! ważne)
  4. ! ważne arkusze stylów autora
  5. ! ważne arkusze stylów użytkownika

Po tym następuje specyfika reguł, które wciąż mają palec w torcie.

Bibliografia:

Fabian Barney
źródło
Jak wskazał @ fabian-barney, !importantjest modyfikatorem porządku kaskadowego developer.mozilla.org/en-US/docs/Web/CSS/Cascade (patrz tabela w celach informacyjnych).
Doomjunky