CSS için öncelik sırası nedir?

Neden css sınıflarımdan birinin diğerini geçersiz kıldığını anlamaya çalışıyorum (tersi değil)

Burada iki css sınıfım var

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

ve benim görüşüme göre arıyorum

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

Yazı tipi (örtüşen öğe) 20 yerine 10 piksel olarak görünüyor - birisi bunun neden böyle olduğunu açıklayabilir mi?

Birkaç kural vardır (bu sırayla uygulanır):

1. satır içi css (html stil niteliği), stil etiketi ve css dosyasındaki css kurallarını geçersiz kılar
2. daha spesifik bir seçici, daha az spesifik olana göre önceliklidir
3. Kodda daha sonra görünen kurallar, her ikisi de aynı özgüllüğe sahipse daha önceki kuralları geçersiz kılar.
4. Bir css kuralı !importanther zaman önceliklidir.

Sizin durumunuzda, geçerli olan 3. kural.

En yüksekten en düşüğe doğru tek seçiciler için özgüllük:

• kimlikler (örnek: #mainseçer <div id="main">)
• sınıfları (örn .: .myclass), özelliği, seçiciler (örn .: [href=^https:]) ve yalancı sınıfları (örn .: :hover)
• elemanlar (ör .: div) ve sözde elemanları (örn .: ::before)

İki birleşik seçicinin özgüllüğünü karşılaştırmak için, yukarıdaki özgüllük gruplarının her birinin tek seçicisinin oluşum sayısını karşılaştırın.

Örnek: Karşılaştırma #nav ul li a:hoveriçin#nav ul li.active a::after

• id seçicilerin sayısını sayın: her biri için bir tane var ( #nav)
• sınıf seçicilerin sayısını sayın: her biri için bir tane var ( :hoverve .active)
• eleman seçicilerin sayısını sayın: ul li abirinci için 3 ( ) ve ikinci için 4 ( ul li a ::after) vardır, bu nedenle ikinci birleşik seçici daha spesifiktir.

CSS seçici özgüllüğü hakkında iyi bir makale .

Aşağıda, CSS kurallarının daha yüksek önceliğe sahip olduğu ve diğerlerine göre öncelikli olduğu bir şemadaki CSS stil sıralaması derlemesi verilmiştir:

Sorumluluk reddi : Ekibim ve ben bu parçayı , tüm ön uç için kullanışlı olacağını düşündüğüm bir blog gönderisiyle ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) birlikte çalıştık geliştiriciler.

Burada baktığımız şeye, Mozilla'nın belirttiği gibi özgüllük denir :

Özgüllük, tarayıcıların hangi CSS özellik değerlerinin bir öğeyle en alakalı olduğuna ve bu nedenle uygulanacağına karar verme yoludur. Özgüllük, farklı türden CSS seçicilerinden oluşan eşleştirme kurallarına dayanır.

Özgüllük, belirli bir CSS bildirimine uygulanan ve eşleşen seçicideki her seçici türünün sayısına göre belirlenen bir ağırlıktır. Birden çok bildirim eşit özgüllüğe sahip olduğunda, CSS'de bulunan son bildirim öğeye uygulanır. Özgüllük yalnızca aynı öğe birden çok bildirimle hedeflendiğinde geçerlidir. CSS kurallarına göre, doğrudan hedeflenen öğeler her zaman bir öğenin atasından devraldığı kurallara göre öncelikli olacaktır.

Https://specifishity.com adresindeki 0-0-0 açıklamasını beğendim :

!importantDirektifin resmini oldukça açıklayıcı ! Ancak bazen satır içi styleözniteliği geçersiz kılmanın tek yolu budur . Bu yüzden her ikisinden de kaçınmaya çalışmak en iyi uygulamadır.

Her şeyden önce, @extenddirektifinize göre, saf CSS değil, SASS os Stylus gibi bir önişlemci kullanıyorsunuz gibi görünüyor.

Şimdi, CSS'de "öncelik sırası" hakkında konuştuğumuzda, ilgili genel bir kural vardır: diğer kurallardan sonra (yukarıdan aşağı bir şekilde) belirlenen kurallar uygulanır. Sizin durumunuzda, sadece .smallboxsonrasını belirterek .smallbox-paysummarykurallarınızın önceliğini değiştirebilirsiniz.

Bununla birlikte, biraz daha ileri gitmek isterseniz, şu okumayı öneririm: CSS basamaklı W3C özelliği . Bir kuralın önceliğinin şunlara dayandığını göreceksiniz:

1. Mevcut ortam türü;
2. Önem;
3. Menşei;
4. Seçicinin özgüllüğü ve nihayet iyi bilinen kuralımız:
5. Hangisi daha sonra belirtilmiştir.

AS, W3'te durumdur: W3 Cascade CSS

farklı stil sayfasının uygulandığı kural şudur (W3 basamaklı bölümünden alıntı):

1. kullanıcı aracısı bildirimleri

2. kullanıcı normal beyanları

3. normal bildirimler yazar

4. önemli bildirimler yazar

5. önemli kullanıcı beyanları

Bununla ilgili daha fazla bilgi ilgili W3 belgesinde

Sınıfların html öğesinde görünme sırası önemli değildir, önemli olan blokların stil sayfasında görünme sırasıdır.

Sizin durumunuzda 10px önceliğinden .smallbox-paysummarysonra tanımlanır .smallbox.

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

Satır içi css (html stili niteliği), stil etiketi ve css dosyasındaki css kurallarını geçersiz kılar

Daha spesifik bir seçici, daha az spesifik olana göre önceliklidir.

Kodda daha sonra görünen kurallar, her ikisi de aynı özgüllüğe sahipse önceki kuralları geçersiz kılar.

Bir HTML öğesinde eşit önceliğe sahip iki stiliniz olduğunda, tarayıcının en son DOM'a yazılan stillere öncelik vereceği de unutulmamalıdır ... Bu nedenle DOM'da:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... div'in genişliği 50 piksel olacaktır