Apakah pemilih sejagat (*) dalam CSS?-tutorial css-php.cn

Apakah pemilih sejagat (*) dalam CSS?

Pemilih sejagat, yang dilambangkan oleh simbol asterisk (*), adalah pemilih dalam CSS yang sepadan dengan mana -mana elemen dalam dokumen. Ia adalah kad liar yang menggunakan gaya untuk semua elemen di laman web, tanpa mengira jenis, kelas, atau ID mereka. Apabila digunakan, ia boleh digabungkan dengan pemilih lain untuk memohon gaya di seluruh dunia atau untuk menetapkan semula sifat -sifat tertentu di seluruh dokumen.

Sebagai contoh, peraturan CSS berikut akan menetapkan warna teks menjadi biru untuk semua elemen di halaman:

 <code class="css">* { color: blue; }</code>

Salin selepas log masuk

Pemilih sejagat juga boleh digunakan dalam pemilih yang lebih spesifik. Sebagai contoh, untuk mensasarkan semua elemen di dalam <div> dengan kelas "bekas", anda akan menulis:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">.container * { margin: 0; padding: 0; }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Kebolehgunaan yang luas ini menjadikan pemilih sejagat sebagai alat yang berkuasa di CSS, tetapi ia harus digunakan dengan bijak kerana kesannya terhadap prestasi dan kekhususan.</p> <h3> Bagaimanakah pemilih sejagat (*) mempengaruhi prestasi dalam CSS?</h3> <p> Pemilih sejagat (*) boleh memberi kesan yang signifikan terhadap prestasi, terutamanya disebabkan oleh cara penyemak imbas proses dan menggunakan peraturan CSS. Berikut adalah perkara penting untuk dipertimbangkan:</p> <ol> <li> <strong>Peningkatan Overhead Komputasi</strong> : Penyemak imbas perlu menyemak setiap elemen tunggal pada halaman apabila pemilih sejagat digunakan. Ini bermakna penyemak imbas mesti memohon gaya yang ditentukan untuk beribu -ribu elemen yang berpotensi, yang boleh membawa kepada masa rendering halaman yang lebih perlahan.</li> <li> <strong>Pencocokan pemilih</strong> : Proses yang sepadan dengan pemilih sejagat adalah sememangnya kurang cekap daripada menggunakan pemilih yang lebih spesifik. Apabila penyemak imbas menemui pemilih sejagat, ia perlu melintasi seluruh pokok Dom, yang meningkatkan masa yang diperlukan untuk rendering.</li> <li> <strong>Kesan ke atas kekhususan dan cascading</strong> : Kerana pemilih sejagat mempunyai kekhususan yang sangat rendah, ia dapat ditindih oleh pemilih yang lebih spesifik. Walau bagaimanapun, apabila digabungkan dengan pemilih lain, ia masih boleh menyumbang kepada rantaian kekhususan yang kompleks, merumitkan cascade dan berpotensi melambatkan enjin rendering.</li> <li> <strong>Reflow and Rotaint</strong> : Memohon gaya kepada semua elemen boleh mencetuskan pelbagai reflow dan pengecutan, terutamanya jika gaya mempengaruhi sifat susun atur seperti margin atau padding. Ini dapat merendahkan prestasi, terutamanya pada peranti mudah alih atau perkakasan yang lebih lama.</li> </ol> <p> Ringkasnya, sementara pemilih sejagat berguna, aplikasi luasnya boleh membawa kepada isu -isu prestasi, menjadikannya penting untuk menggunakannya dengan berhati -hati dan dengan pertimbangan yang teliti terhadap kesannya.</p> <h3> Bolehkah pemilih sejagat (*) digunakan untuk menetapkan semula gaya dalam CSS, dan jika ya, bagaimana?</h3> <p> Ya, pemilih sejagat (*) boleh digunakan dengan berkesan untuk menetapkan semula gaya dalam CSS. Gaya penetapan semula adalah amalan biasa untuk memastikan penyajian yang konsisten merentasi pelayar yang berbeza, yang sering mempunyai gaya lalai mereka sendiri untuk elemen HTML. Berikut adalah cara anda boleh menggunakan pemilih sejagat untuk menetapkan semula gaya:</p> <ol> <li> <p> <strong>Reset Global</strong> : Anda boleh menggunakan pemilih sejagat untuk menetapkan semula sifat tertentu untuk semua elemen. Contoh yang sama ialah menetapkan semula margin dan padding ke sifar:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">* { margin: 0; padding: 0; }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> </li> <li> <p> <strong>Reset Model Kotak</strong> : Anda juga boleh menggunakan pemilih sejagat untuk menormalkan model kotak di seluruh elemen:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">* { box-sizing: border-box; }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> </li> <li> <p> <strong>Reset Gabungan</strong> : Anda mungkin menggabungkan pemilih sejagat dengan pemilih lain untuk membuat tetapan semula komprehensif. Sebagai contoh, gaya menetapkan semula berikut untuk semua elemen, termasuk elemen pseudo:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> </li> <li> <strong>Warisan dan kekhususan</strong> : Apabila menggunakan pemilih sejagat untuk tujuan penetapan semula, berhati -hati dengan warisan dan kekhususan CSS. Sesetengah sifat (seperti <code>font-family atau color ) mungkin diset semula lebih baik pada unsur-unsur tertentu atau melalui cara lain untuk mengelakkan penindasan yang tidak perlu.

Dengan menggunakan pemilih sejagat dengan cara ini, anda boleh membuat slate bersih untuk gaya anda, menjadikannya lebih mudah untuk melaksanakan reka bentuk anda secara konsisten merentasi pelbagai pelayar dan peranti.

Dalam apa senario harus pemilih sejagat (*) dielakkan dalam CSS?

Walaupun pemilih sejagat (*) mempunyai kegunaannya, terdapat senario tertentu di mana ia harus dielakkan kerana kelemahan yang berpotensi:

Laman Prestasi-Kritikal : Pada halaman di mana prestasi adalah kritikal, seperti laman web atau aplikasi trafik tinggi yang perlu dimuatkan dengan cepat, pemilih sejagat harus digunakan dengan berhati-hati atau dielakkan sama sekali. Aplikasi luasnya boleh melambatkan rendering dan memberi kesan negatif kepada pengalaman pengguna.
Pemilih Kompleks : Apabila digabungkan dengan pemilih lain, pemilih sejagat boleh membawa kepada pemilih yang terlalu kompleks yang sukar dikekalkan dan difahami. Sebagai contoh, .container * .item kurang jelas dan lebih mahal daripada .container .item .
Isu Spesifikasi : Pemilih sejagat mempunyai kekhususan yang rendah, yang boleh menyebabkan gaya yang tidak diingini mengatasi dan merumitkan cascade CSS. Dalam kes -kes di mana anda memerlukan kekhususan yang tinggi, pemilih sejagat mungkin bukan pilihan terbaik.
Aplikasi berskala besar : Dalam aplikasi web berskala besar, menggunakan pemilih sejagat boleh membawa kepada jumlah semula gaya yang tinggi, terutamanya semasa kemas kini dinamik. Ini boleh menyebabkan prestasi yang lebih perlahan dan peningkatan beban pada penyemak imbas.
Penggunaan yang kerap : Lebih banyak pemilih sejagat merentasi stylesheet dapat mengembang CSS dan menjadikannya lebih sukar untuk debug. Lebih baik menggunakannya untuk tujuan tertentu, seperti semula, bukan sebagai penyelesaian untuk gaya.
Kebimbangan kebolehcapaian : Apabila digunakan untuk menetapkan semula gaya, pemilih sejagat kadang -kadang boleh mempengaruhi ciri kebolehaksesan secara tidak sengaja. Sebagai contoh, menetapkan semula gaya fokus mungkin memberi kesan kepada pengguna yang bergantung kepada navigasi papan kekunci.

Ringkasnya, sementara pemilih sejagat adalah alat yang berkuasa dalam CSS, penggunaannya harus dipertimbangkan dengan teliti, terutama dalam persekitaran sensitif atau kompleks prestasi. Pemilih yang lebih spesifik sering menjadi pilihan yang lebih baik untuk gaya yang disasarkan dan prestasi yang lebih baik.

Atas ialah kandungan terperinci Apakah pemilih sejagat (*) dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!