Apa urutan prioritas untuk CSS?

Saya mencoba mencari tahu mengapa salah satu kelas css saya tampaknya menimpa yang lain (dan bukan sebaliknya)

Di sini saya memiliki dua kelas css

.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;
}

dan dalam pandangan saya, saya menelepon

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

Font (Elemen yang tumpang tindih) muncul sebagai 10px, bukan 20 - dapatkah seseorang menjelaskan mengapa hal ini terjadi?

Ada beberapa aturan (diterapkan dalam urutan ini):

1. css sebaris (atribut gaya html) menggantikan aturan css dalam tag gaya dan file css
2. pemilih yang lebih spesifik lebih diutamakan daripada yang kurang spesifik
3. aturan yang muncul kemudian di kode menimpa aturan sebelumnya jika keduanya memiliki kekhususan yang sama.
4. Aturan css dengan !importantselalu diutamakan.

Dalam kasus Anda, aturan 3 yang berlaku.

Kekhususan untuk penyeleksi tunggal dari yang tertinggi hingga terendah:

• id (contoh: #mainpilih <div id="main">)
• Kelas (ex .: .myclass), penyeleksi atribut (ex .: [href=^https:]) dan pseudo-kelas (ex .: :hover)
• elemen (ex .: div) dan pseudo-elemen (ex .: ::before)

Untuk membandingkan kekhususan dua selektor gabungan, bandingkan jumlah kemunculan selektor tunggal dari masing-masing kelompok kekhususan di atas.

Contoh: bandingkan #nav ul li a:hoverdengan#nav ul li.active a::after

• hitung jumlah pemilih id: ada satu untuk masing-masing ( #nav)
• hitung jumlah pemilih kelas: ada satu untuk masing-masing ( :hoverdan .active)
• hitung jumlah pemilih elemen: ada 3 ( ul li a) untuk yang pertama dan 4 untuk yang kedua ( ul li a ::after), jadi pemilih gabungan kedua lebih spesifik.

Artikel bagus tentang kekhususan pemilih css .

Berikut adalah kompilasi urutan gaya CSS dalam diagram, di mana aturan CSS memiliki prioritas lebih tinggi dan lebih diutamakan daripada yang lainnya:

Penafian : Saya dan tim saya mengerjakan bagian ini bersama-sama dengan sebuah posting blog ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) yang menurut saya akan berguna untuk semua front-end pengembang.

Apa yang kita lihat di sini disebut kekhususan seperti yang dinyatakan oleh Mozilla :

Kekhususan adalah cara browser memutuskan nilai properti CSS mana yang paling relevan dengan elemen dan, oleh karena itu, akan diterapkan. Kekhususan didasarkan pada aturan pencocokan yang terdiri dari berbagai jenis pemilih CSS.

Kekhususan adalah bobot yang diterapkan ke deklarasi CSS tertentu, ditentukan oleh jumlah setiap jenis pemilih di pemilih yang cocok. Jika beberapa deklarasi memiliki kekhususan yang sama, deklarasi terakhir yang ditemukan di CSS diterapkan ke elemen tersebut. Kekhususan hanya berlaku jika elemen yang sama ditargetkan oleh beberapa deklarasi. Sesuai aturan CSS, elemen yang ditargetkan secara langsung akan selalu didahulukan daripada aturan yang diwarisi elemen dari leluhurnya.

Saya suka penjelasan 0-0-0 di https://specifishity.com :

Gambaran !importantinstruksi yang cukup deskriptif ! Namun terkadang itu satu-satunya cara untuk mengganti styleatribut inline . Jadi, praktik terbaik adalah mencoba menghindari keduanya.

Pertama-tama, berdasarkan @extendarahan Anda , sepertinya Anda tidak menggunakan CSS murni, tetapi preprocessor seperti SASS os Stylus.

Sekarang, ketika kita berbicara tentang "urutan prioritas" di CSS, ada aturan umum yang terlibat: aturan apa pun yang ditetapkan setelah aturan lain (dengan cara top-down) diterapkan. Dalam kasus Anda, hanya dengan menentukan .smallboxsetelah .smallbox-paysummaryAnda akan dapat mengubah prioritas aturan Anda.

Namun, jika Anda ingin melangkah lebih jauh, saya sarankan membaca ini: Spesifikasi CSS cascade W3C . Anda akan menemukan bahwa presedensi aturan didasarkan pada:

1. Jenis media saat ini;
2. Pentingnya;
3. Asal;
4. Kekhususan pemilih, dan akhirnya aturan kami yang terkenal:
5. Yang mana yang ditentukan terakhir.

AS adalah keadaan di W3: W3 Cascade CSS

Orden bahwa style sheet berbeda diterapkan adalah sebagai berikut (kutipan dari bagian berjenjang W3):

1. deklarasi agen pengguna

2. deklarasi normal pengguna

3. penulis deklarasi normal

4. penulis deklarasi penting

5. deklarasi penting pengguna

Informasi lebih lanjut tentang ini di dokumen W3 yang dirujuk

Urutan kemunculan kelas dalam elemen html tidak menjadi masalah, yang penting adalah urutan munculnya blok di style sheet.

Dalam kasus Anda .smallbox-paysummaryditentukan setelah .smallboxitu diutamakan 10px.

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)

Css sebaris (atribut gaya html) menggantikan aturan css dalam tag gaya dan file css

Pemilih yang lebih spesifik lebih diutamakan daripada yang kurang spesifik.

Aturan yang muncul nanti dalam kode akan menggantikan aturan sebelumnya jika keduanya memiliki kekhususan yang sama.

Yang juga penting untuk diperhatikan adalah ketika Anda memiliki dua gaya pada elemen HTML dengan prioritas yang sama, browser akan mendahulukan gaya yang ditulis ke DOM terakhir ... jadi jika di DOM:

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

... lebar div akan menjadi 50px