Pemilih CSS: Kekhususan

Petikan berikut adalah dari buku "CSS Master" yang ditulis oleh Tiffany B. Brown. Buku ini boleh didapati di kedai-kedai di seluruh dunia, dan anda juga boleh membeli versi e-book di sini.

kekhususan CSS menentukan pengisytiharan gaya yang akhirnya digunakan untuk elemen tersebut. Pemilih Wildcard (*) mempunyai kekhususan terendah dan pemilih ID mempunyai kekhususan tertinggi. Pemilih keturunan (mis. P img) dan sub pemilih (mis.

Pada pandangan pertama, mengira nilai kekhususan yang tepat nampaknya rumit. Seperti yang dinyatakan dalam tahap pemilih 3, anda memerlukan:

Statistik Bilangan pemilih ID dalam pemilih (= a)

• Statistik Bilangan pemilih kelas, pemilih atribut dan kelas pseudo dalam pemilih (= b)
• Statistik Bilangan pemilih jenis dan elemen pseudo dalam pemilih (= c)
• Abaikan pemilih Wildcard

Nilai A, B dan C ini kemudian digabungkan untuk membentuk nilai khusus akhir. Sebagai contoh, pemilih ID #Foo mempunyai kekhususan 1,0,0. Kekhususan pemilih atribut (mis. [Type = email]) dan pemilih kelas (mis. .Chart) adalah 0,1,0. Menambah kelas pseudo (mis .: Anak pertama, mis.. Walau bagaimanapun, dengan menggunakan pemilih jenis atau elemen mudah (mis. H1 atau P) hanya akan menjadikan kekhususan 0,0,1.

Nota: Kirakan kekhususan

Kalkulator Spesifikasi Keegan Street dan CSS Joshua Peek Jelaskan bantuan belajar dan mengira kekhususan pemilih.

Sudah tentu, pemilih kompleks dan pemilih gabungan akan menghasilkan nilai kekhususan yang lebih tinggi. Mari kita lihat contoh. Pertimbangkan CSS berikut:

Kedua -dua set peraturan ini sama, tetapi tidak sama. Pemilih pertama, UL#Story-List & GT; Nilai kekhususannya ialah 1,1,1. Pemilih Kedua #Story-List & GT; Nilai kekhususannya ialah 1,1,0. Walaupun kami #Story-List & GT; .

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

pseudoclasses seperti: pautan atau: tidak sah mempunyai tahap kekhususan yang sama sebagai pemilih kelas. Nilai kekhususan a: pautan dan a.external adalah 0,1,1. Begitu juga, elemen pseudo seperti :: sebelum dan :: selepas adalah seperti jenis atau pemilih elemen khusus. Jika kekhususan kedua -dua pemilih adalah sama, lata itu berkuatkuasa. Berikut adalah contoh:

Jika kita memohon CSS ini, semua pautan akan menjadi slate biru kecuali untuk pautan yang memohon kelas. Lternal. Pautan ini akan ditukar kepada Orange.

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

Menjaga kekhususan yang rendah membantu mencegah penyebaran pemilih, iaitu kecenderungan pemilih dan panjang untuk meningkat dari masa ke masa. Ini biasanya berlaku apabila anda menambah pemaju baru ke pasukan anda atau borang kandungan baru ke laman web anda. Penyebaran pemilih juga boleh menyebabkan kesukaran penyelenggaraan jangka panjang. Anda akhirnya menggunakan pemilih yang lebih spesifik untuk menimpa peraturan lain atau anda perlu refactor kod. Pemilih yang lebih lama juga meningkatkan berat fail CSS.

Kami membincangkan strategi untuk menjaga kekhususan rendah dalam Bab 2.

Kesimpulan

Selepas membaca bab ini, anda harus mempunyai pemahaman yang baik tentang pemilih CSS. Khususnya, anda harus tahu bagaimana:

• Gunakan CSS untuk elemen tertentu, elemen pseudo, dan kelas pseudo menggunakan pemilih
• memahami perbezaan antara elemen pseudo dan kelas pseudo
• Gunakan kelas pseudo yang lebih baru yang diperkenalkan dalam tahap pemilih 3 dan 4 spesifikasi
• kekhususan pengiraan

Dalam bab seterusnya, kami akan memperkenalkan beberapa Peraturan Emas untuk menulis CSS yang boleh dipelihara, boleh diperluas.

soalan yang sering ditanya mengenai pemilih dan kekhususan CSS (FAQ)

Apakah kepentingan kekhususan CSS dalam pembangunan web?

kekhususan CSS adalah konsep utama dalam pembangunan web kerana ia menentukan yang CSS memerintah penyemak imbas terpakai. Apabila banyak peraturan CSS boleh digunakan untuk elemen, penyemak imbas mengikuti peraturan khusus untuk menentukan peraturan mana yang hendak digunakan. Memahami kekhususan CSS boleh membantu pemaju menulis kod CSS yang lebih cekap dan cekap, mengelakkan mengatasi yang tidak perlu, dan menyelesaikan masalah CSS dengan lebih berkesan.

Bagaimana untuk mengira kekhususan CSS?

Pengiraan kekhususan CSS adalah berdasarkan pelbagai jenis pemilih yang digunakan dalam peraturan CSS. Setiap jenis pemilih mempunyai nilai kekhususan yang berbeza. Gaya inline mempunyai kekhususan tertinggi, diikuti oleh pemilih ID, pemilih kelas, pemilih atribut, dan kelas pseudo, dan akhirnya menaip pemilih dan elemen pseudo. Kekhususan peraturan CSS adalah jumlah nilai pemilihnya.

Bolehkah anda menerangkan konsep kekhususan CSS dengan contoh?

mari kita pertimbangkan contoh. Katakan kami mempunyai peraturan CSS dengan pemilih kelas .Class1 dan peraturan lain dengan pemilih ID #ID1. Jika kedua -dua peraturan ini boleh digunakan untuk elemen yang sama, peraturan dengan pemilih ID digunakan kerana pemilih ID mempunyai kekhususan yang lebih tinggi daripada pemilih kelas.

Apa yang berlaku apabila dua peraturan CSS mempunyai kekhususan yang sama?

Apabila dua peraturan CSS mempunyai kekhususan yang sama, peraturan terakhir yang muncul dalam kod CSS akan digunakan. Ini kerana CSS mengikuti strategi "kemenangan terakhir" ketika menangani peraturan dengan kekhususan yang sama.

Bagaimana untuk menutup kekhususan CSS?

anda boleh mengatasi kekhususan CSS dengan meningkatkan kekhususan peraturan CSS. Ini boleh dilakukan dengan menambah pemilih yang lebih spesifik kepada peraturan. Satu lagi cara untuk mengatasi kekhususan CSS adalah menggunakan peraturan penting. Walau bagaimanapun, penting harus dielakkan apabila mungkin, kerana ia akan menjadikan kod CSS anda lebih sukar untuk dikendalikan dan debug.

Apakah peranan warisan dalam kekhususan CSS?

warisan adalah ciri dalam CSS di mana jenis atribut tertentu secara automatik diluluskan dari elemen induk kepada elemen anaknya. Walau bagaimanapun, gaya yang diwarisi mempunyai kekhususan yang paling rendah dan boleh dengan mudah ditimpa oleh gaya langsung yang digunakan untuk elemen tersebut.

Bagaimana pemilih wildcard mempengaruhi kekhususan CSS?

Pemilih Wildcard (*) tidak mempunyai kesan ke atas kekhususan CSS. Ini bermakna nilai kekhususannya ialah 0,0,0,0. Oleh itu, mana -mana pemilih lain yang digunakan dalam peraturan yang sama akan mengatasi pemilih Wildcard.

Apakah kekhususan elemen pseudo dalam CSS?

kekhususan elemen pseudo dalam CSS adalah 0,0,0,1. Ini bermakna mereka mempunyai kekhususan yang sama seperti pemilih jenis (seperti div, p, dan lain -lain) dan ditindih oleh pemilih kelas, pemilih ID, dan gaya inline.

: tidak () Bagaimanakah kelas pseudo mempengaruhi kekhususan CSS?

: tidak () kelas pseudo dalam CSS tidak meningkatkan kekhususan pemilih. Sebaliknya, pengiraan khusus adalah berdasarkan parameter yang diluluskan kepada fungsi: tidak (). Sebagai contoh, dalam: tidak (.class1), kekhususan adalah sama seperti .class1.

Bolehkah saya menggunakan pelbagai pemilih dalam peraturan CSS tunggal? Bagaimanakah ia mempengaruhi kekhususan?

Ya, anda boleh menggunakan pelbagai pemilih dalam peraturan CSS tunggal. Kekhususan peraturan tersebut adalah jumlah semua spesifikasi pemilihnya. Sebagai contoh, dalam #id1.class1, kekhususan adalah jumlah kekhususan #ID1 dan .Class1.

Atas ialah kandungan terperinci Pemilih CSS: Kekhususan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!