Birden çok çelişkili css dosyası kullanırken öncelik sırasını sınama

Question

Aynı sayfada birden çok css dosyası kullanıldığında ve çarpıştıklarında hangisinin kullanılacağını nasıl bilebilirim? Örneğin, biri mavi beden arka plan ve diğeri kırmızı diyorsa.

Answer 1

Hızlı Cevap:

CSS her iki parça aynı specificity (örneğin, ikisi de body{) varsa, o SON çağrılan hangisi öncekinineredeyse geçersiz kılar. Bir şey daha yüksek özgüllüğe (daha spesifik bir seçiciye) sahipse, siparişten bağımsız olarak kullanılacaktır.

---

Örnek 1: Yukarıdaki örnek kırmızı renk yapacak

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    .name { color: blue; } 
    .name { color: red; } 
</style> 

. Her iki seçmen de aynıdır ve bu nedenle de aynı özgüllüğe sahiptir. Ve CSS yukarıdan aşağıya okuduğundan, önce mavi olduğunu söyleriz, ama sonra bunu "nevermind, kırmızı yap" diyerek geçersiz kılar.

---

Örnek 2:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    #container .name { background-color: blue; } 
    .name { background-color: red; } 
</style> 

Yukarıdaki örnek seçici more "specific" çünkü mavi ilk halde, arka plan rengi mavi yapacaktır.

---

İstisna (!important kullanımı): Eğer bir karışıklık ile çalışıyorsanız !important dahil özgünlüğünü ve düzeni hem geçersiz kılar

, ama bence, sadece kullanılmalıdır Başka bir şekilde değiştirmek için erişiminiz olmayan üçüncü taraf kodu.

---

Dış CSS:

Üzerine Yaz kurallar harici CSS dosyaları üzerinde aynı şekilde çalışır. Sadece onları en üste, en üste üste koymayı hayal et. İlk dosya (lar) da adlandırılan seçiciler, sonraki dosyalarda aynı özgüllük seçiciler tarafından üzerine yazılacaktır. Ancak, özgüllük yine aynı dosya içinde veya birden çok dosya içinde sipariş kozlarız.

---

Nasıl testi için: Chrome, Firefox ise

ve IE'nin modern versiyonları (muhtemelen Safari çok), doğru bir şey tıklayabilir ve "Öğeyi İncele" a tıklayın. Bu size HTML'yi ve uygulanmış CSS'yi gösterecektir. CSS'yi aşağı doğru kaydırırken (genellikle sağda), çaprazlanmış olanları görürsünüz - bu, ya yanlış CSS ya da üzerine yazıldığını gösterir. Test etmek için, CSS seçicilerini (ya kendi kodunuzda ya da geliştirici araçları kutusunun içinde) değiştirerek daha spesifik hale getirebilir ve daha sonra çapraz çizilip çıkarılmadığını görebilirsiniz. W/bu araç etrafında oyna - ÇOK yardımcı olur.