CSS'de! Önemli ne anlama geliyor?


409

!importantCSS'de ne anlama geliyor?

CSS 2'de mevcut mu? CSS 3?

Nerede desteklenir? Tüm modern tarayıcılar?



17
... mümkün olduğunca kaçınılması gereken bir şey.
Scott

Yanıtlar:


400

Bu aslında söylediği anlamına gelir; 'Bu önemlidir, sonraki kuralları ve olağan özgüllük sorunlarını gözardı edin, bu kuralı uygulayın !

Normal kullanımda, harici bir stil sayfasında tanımlanan bir kural head, belgenin içinde tanımlanan bir stil tarafından geçersiz kılınır ve bu da öğenin içindeki satır içi bir stil tarafından geçersiz kılınır (seçicilerin eşit özgüllüğü varsayılarak). Bir kuralın tanımlama !important'özelliği' (?) Açısından normal endişeleri 'erken' olanları geçersiz kılma 'daha sonra' kuralı atar.

Ayrıca, normal olarak, daha spesifik bir kural daha az spesifik bir kuralı geçersiz kılar. Yani:

a {
    /* css */
}

Normalde tarafından geçersiz kılınır:

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

İkincisi seçici daha spesifik (daha spesifik seçici içinde (bulunduğunda ve normalde fark etmez olduğundan headveya harici bir stil) o olacak hala in-line stili nitelikleri kendiliğinden gelir (daha az spesifik seçici geçersiz hep her zaman daha belirgin olduğu için 'daha fazla' veya 'daha az' özel seçiciyi geçersiz kılın .

Bununla birlikte, !importantdaha az spesifik olan seçicinin CSS bildirimine eklerseniz , önceliğe sahip olacaktır.

Kullanmanın !importantamaçları vardır (onları düşünmek için mücadele etsem de), ancak tilkilerin tavuklarınızı öldürmesini durdurmak için nükleer bir patlama kullanmak gibidir; evet, tilkiler öldürülecek, ama tavuklar da öldürülecek. Ve mahalle.

Ayrıca CSS'nizde hata ayıklamayı kabus yapar (kişisel, ampirik, deneyimden).


253
Birçok programlama dilinde önek gibi birçok geliştirici için de kafa karıştırıcı! demek değil .
rustyx

19
! İmportant'in bir amacı, büyük olasılıkla sizinkinden daha spesifik olan diğer kişilerin CSS'sini geçersiz kıldığınız bir GreaseMonkey betiğidir.
Noumenon

1
Resmi olarak W3 buna "kural" diyor.
JD Smith

5
en azından alaycı değil ve diyor important!(önemli DEĞİL)
user3553260

2
Şunu yazdınız: 'Normal kullanımda, harici bir stil sayfasında tanımlanan bir kural, belgenin başında tanımlanan bir stil tarafından geçersiz kılınır'. Bu yanlış.
jlguenego

130

! Önemli kural, CSS kaskadınızı oluşturmanın bir yoludur, ancak her zaman uygulanacak en önemli olduğunu düşündüğünüz kurallara sahiptir. ! Önemli özelliğe sahip bir kural, CSS belgesinde nerede olursa olsun her zaman uygulanır.

Yani, aşağıdakilere sahipseniz:

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

önemli olan kural uygulanan kural olacaktır ( özgüllüğü saymaz )

!importantCSS1'de her tarayıcıyı desteklediğine inanıyorum (kısmi bir uygulama ile IE4'den IE6'ya, IE7 + tam)

Ayrıca, oldukça sık kullanmak istemediğiniz bir şeydir, çünkü başka insanlarla çalışıyorsanız diğer özellikleri geçersiz kılabilirsiniz.


1
IE4 +, aslında, böcek ile, 6'ya kadar ve 6 dahil.
BoltClock

15
Karışıklık !, bazı dillerde NOT için bir sembol olduğu gibi gerçekleşir , ancak şimdi daha açıktır.
Si8

2
Özellikle sözdizimini kullanmak için eklemenize sevindim !important. CSS diğer dillerden yeterince farklıdır ve bazı şeyleri nasıl kullanacağınızı unutmanız kolaydır.
blainarmstrong

3
@ Si8 - Evet, bu karışıklık nedeniyle, her zaman "onlar" ın onu değil important!, belki de tanımlaması gerektiğini düşündüm . Acaba kimse (bunu okuyabilir) neden önündeki noktalama işareti ile tanımladıklarını biliyor mu? Açıkçası, şimdi değiştirmek için çok geç. IMPORTANT!!important
Kevin Fegan

22

!important CSS1'in bir parçasıdır.

Bunu destekleyen tarayıcılar: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Bunun anlamı:

Eğer başka önemli bir şey yoksa beni kullan!

Daha iyi diyemeyiz.


5
!importantyalnızca Safari 3+ ile sınırlı değildir; diğer tüm IE olmayan tarayıcılar gibi en başından beri destekledi. IE, sürüm 4'ten itibaren anlıyor, ancak yalnızca sürüm 7'den başlayarak hatasız destekliyor
BoltClock

12

Kökene göre sıralama yapıldığında CSS kaskatındaki sıralamayı etkilemek için kullanılır. Burada diğer cevaplarda belirtildiği gibi özgüllük ile ilgisi yoktur.

İşte en düşükten en yükseğe öncelik:

  1. tarayıcı stilleri
  2. kullanıcı stil sayfası bildirimleri (olmadan! önemli)
  3. yazar tarzı sayfa bildirimleri (olmadan! önemli)
  4. ! önemli yazar tarzı sayfaları
  5. ! önemli kullanıcı stil sayfaları

Bundan sonra , pastada hala bir parmak bulunan kurallar için özgüllük gerçekleşir.

Referanslar:


@ Fabian-barney'in işaret !importantettiği gibi, basamaklı sipariş geliştirici.mozilla.org/ en -US/docs/Web/CSS/Cascade için bir değiştirici .
Doomjunky

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.