Ketik - Trik CSS

Anonim

Pemilih Jenis (terkadang disebut sebagai Pemilih Jenis Elemen) mencocokkan elemen dengan nama node elemen yang sesuai, seperti

, , dan tag. Pemilih jenis biasanya digunakan untuk membuat perubahan "garis besar" pada gaya situs.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Penggunaan Umum

Seringkali Type Selectors disetel sebagai default, seperti dalam reset CSS di mana tujuannya adalah untuk mengganti default browser. Contoh dari baris pertama normalize.css, penyetelan ulang CSS yang populer:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Type Selectors di atas mengatur properti tampilan dari tag tersebut untuk diblokir, sehingga setiap kali salah satu tag tersebut digunakan di seluruh situs, mereka akan ditampilkan sebagai blok kecuali ditimpa oleh gaya yang lebih spesifik.

Praktik terbaik

Biasanya dianggap praktik yang buruk untuk menerapkan perubahan detail halus hanya dengan Type Selector. Misalnya, menerapkan properti "color: white" secara menyeluruh ke semua tag jarang menjadi sesuatu yang berguna di situs mana pun. Ini karena tag bersifat umum dan digunakan di seluruh situs untuk berbagai tujuan.

Namun, dengan Type Selector seperti body ( ), menyetel default font-size dan line-heightumum. Hal ini sebagian disebabkan oleh fakta bahwa hanya boleh ada satu tag di halaman tertentu, sehingga peluang konflik lebih kecil.

Ketik Spesifikasi Selektor dan Kinerja

Type Selectors berada pada tingkat terendah dari cascade spesifisitas (umumnya ditulis sebagai 0, 0, 0, 1), yang berarti bahwa hampir semua hal akan menimpa gaya yang diterapkan melalui Type Selector saja, dan menambahkan Type Selector ke kelas atau ID di CSS Anda memberikan kekhususan ekstra minimal.

Type Selectors juga memiliki peringkat yang lebih rendah pada skala efisiensi CSS daripada kelas dan ID. Oleh karena itu, secara teknis adalah pilihan kinerja yang lebih baik untuk menggunakan kelas atau ID daripada Type Selector yang lebih umum (meskipun perbedaan kecepatan sebenarnya biasanya dapat diabaikan).

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja Apa saja Apa saja Apa saja Apa saja Apa saja Apa saja