Algoritma keutamaan apabila peraturan CSS melata

Keutamaan peraturan CSS ialah konsep yang mesti difahami oleh pembangun bahagian hadapan web. Terdapat 4 kaedah yang biasa digunakan untuk menambah gaya.

1. Gaya sebaris
2 gaya terbenam
3 gaya luaran
4. dengan elemen HTML, ia menyebabkan banyak masalah untuk pembangun bahagian hadapan web. Mereka sering muncul seperti ini:

Gaya dibenamkan lebih lembut daripada gaya sebaris Mereka juga berada dalam dokumen HTML, tetapi mereka tidak peduli untuk berselirat dengan elemen HTML. Ia sering muncul dalam c9ccee2e6ea535a969eb3f532ad9fe89 elemen:

<p style="color:red;">This is a paragraph.</p>

gaya luaran ialah seorang bangsawan, jadi ia hanya wujud secara bebas dalam bentuk fail luaran . Biasanya kami menggunakan elemen 2cdf5bf648cf2f33323966d7f58a7f3f atau pernyataan @import untuk mengimportnya ke dalam HTML.

<style type="text/css" media="screen"> 
    p{ 
        color : red; 
    } 
</style>

Kita harus menggunakan gaya luaran sebanyak mungkin. Saya rasa ada banyak sebab semua orang tahu, jadi saya tidak akan mengulanginya.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Terdapat juga gaya pengguna yang berbeza sedikit daripada tiga di atas Jika anda menggunakan pelayar IE, maka anda boleh mencari kaedah untuk menambah gaya pengguna di bawah Alat – Pilihan Internet – Umum – Penampilan – Kebolehcapaian – Pengguna. tempat helaian gaya (maafkan saya kerana tidak mempunyai pelayar IE versi Cina).

Memandangkan kami mempunyai begitu banyak cara untuk menambah gaya, adalah sukar untuk mengelakkan gaya berlatarkan. Contohnya:

Semasa menggunakan gaya sebaris di atas, kami juga menggunakannya dalam gaya luaran kami:

<p class="intro" style="color:red;">This is a paragraph.</p>

Kami juga mempunyai The a1fe8b7b85fd185e785ec37994572ee1 elemen class="intro", terdapat tiga peraturan CSS yang menentukan atribut warna.

2. Utamakan mengikut kepentingan dan sumber pernyataan

Terdapat dua jenis kepentingan: penting dan biasa (iaitu tidak penting)

Kepentingan menambah !penting selepas peraturan CSS adalah lebih tinggi daripada tidak menambahnya.

Terdapat tiga sumber:

lembaran gaya ejen pengguna – gaya lalai penyemak imbas

lembaran gaya pengarang – gaya yang ditentukan pembangun

lembaran gaya pengguna – menyemak imbas pengguna Keutamaan daripada gaya yang ditakrifkan dalam alat

dari rendah ke tinggi ialah:

lembaran gaya ejen pengguna

peraturan biasa dalam helaian gaya pengguna

Peraturan biasa dalam pengarang helaian gaya

Peraturan penting dalam helaian gaya pengarang

Peraturan penting dalam helaian gaya pengguna

Selepas pengisihan di atas, jika terdapat peraturan CSS mempunyai keutamaan yang lebih tinggi daripada semua yang lain peraturan pertandingan, maka algoritma tamat dan nilai yang ditentukan oleh keutamaan tertinggi dikembalikan. Jika terdapat berbilang peraturan CSS dengan keutamaan tertinggi, mereka akan terus bersaing dan algoritma akan memasuki langkah 3.

3. Isih mengikut Kekhususan

CSS akan mengira nilai kekhususan pemilih yang dinyatakan dalam setiap peraturan dalam berbilang peraturan.

Nilai keistimewaan ialah nilai seperti tatasusunan yang terdiri daripada 4 integer: a, b, c, d, dengan a mempunyai berat tertinggi, dan seterusnya, d mempunyai berat terendah. Kaedah pengiraan nilai kekhususan pemilih ialah:

Jika peraturan ialah gaya sebaris, maka a = 1

Jika peraturan ditentukan oleh pemilih, bilangan pemilih id yang muncul dalam pemilih ialah nilai b

Jika Peraturan ditentukan oleh pemilih Jumlah bilangan pemilih atribut (termasuk pemilih kelas) atau pemilih kelas pseudo yang muncul dalam pemilih ialah nilai c
Jika peraturan ditentukan oleh pemilih, pemilih unsur atau pemilih unsur pseudo yang terdapat dalam pemilih ialah Jumlah kuantiti ialah nilai d. Nilai kekhususan

pemilih universal * ialah 0,0,0,0

Tapak web rasmi menyediakan beberapa contoh untuk memperdalam pemahaman.

Apabila mengisih mengikut nilai kekhususan, memandangkan a mempunyai berat yang paling tinggi, a dibandingkan dahulu Jika a adalah sama, b dibandingkan, dan seterusnya. Oleh itu, tidak kira berapa besar nilai b, c, dan d, gaya sebaris sentiasa mempunyai kekhususan tertinggi.

Jika, selepas mengisih mengikut kekhususan di atas, terdapat peraturan CSS dengan keutamaan yang lebih tinggi daripada semua peraturan bersaing yang lain, maka algoritma akan tamat dan nilai yang ditentukan oleh keutamaan tertinggi dikembalikan. Jika terdapat berbilang peraturan CSS dengan keutamaan tertinggi, mereka akan terus bersaing dan algoritma akan memasuki langkah 4.

4 Bandingkan susunan peraturan CSS yang muncul dalam dokumen

Yang muncul kemudian sentiasa mempunyai keutamaan yang lebih tinggi daripada yang muncul sebelum ini, jadi ia muncul dalam Pernyataan terakhir akan digunakan sebagai nilai harta.