Pilih di CSS metode yang berbeda – Beragampengetahuan
Temani Afif baru-baru ini melakukan latihan ini dan saya pikir saya akan mengembangkannya. Beberapa di antaranya bermanfaat. Banyak dari mereka yang tidak. Akhirnya ada seekor burung!
Contents
html
html {
/* I mean, duh */
}:root
:root {
/* Sarsaparilla, anyone? */
}:root Adalah kelas semu CSS yang cocok dengan elemen root dari dokumen (XML) saat ini. Cocok jika dokumen saat ini adalah dokumen HTML <html>. Sebagai pengembang web, dokumen XML (selain HTML) yang paling mungkin Anda temui adalah:
- Dokumentasi SVG:
:rootKontes<svg> - Dokumen RSS:
:rootKontes<rss> - Dokumen atom:
:rootKontes<feed> - Dokumentasi MathML:
:rootKontes<math> - Dokumen XML lainnya:
:rootCocok dengan elemen terluar (misalnya,<note>)
Tapi seberapa praktisnya? :root? Ya, pseudoclass(0-1-0) memiliki spesifisitas lebih tinggi daripada elemen(0-0-1), jadi kecil kemungkinannya Anda akan menemuinya :root.
Merupakan hal yang umum untuk mendeklarasikan properti kustom global :roottapi sebenarnya aku lebih suka :scope Karena secara semantik cocok dengan cakupan global. Namun kenyataannya, tidak ada bedanya.
/* Global variables */
:root { --color: black; }
:scope { --color: black; }mari kita bicara :scope Dan beberapa lagi…
:scope atau &
:scope {
/* Insert scope creep here */
}Ya, bukan itu nyata Apa :scope Ini untuk.
Seperti yang saya sebutkan, :scope cocok global akar rentang(<html>). Namun, hal ini hanya berlaku jika tidak digunakan dalam baseline yang baru @scope at-rule, digunakan untuk mendefinisikan a kebiasaan akar lingkup.
Kami juga dapat melakukan ini:
& {
/* And...? */
}Biasanya, & Selector bekerja dengan CSS nesting, menghubungkan selector saat ini ke selector yang memuatnya, sehingga memungkinkan kita untuk membuat nesting selector meskipun secara teknis kita tidak berurusan dengan selector nested. Misalnya:
element:hover {
/* This */
}
element {
&:hover {
/* Becomes this (notice the &) */
}
}
element {
:hover {
/* Because this (with no &) */
}
}
element :hover {
/* Means this (notice the space before :hover) */
}
element {
:hover & {
/* Means :hover element, but I digress */
}
}Kapan & Tidak bersarang, hanya memilih akar rentang yang berada di luar rentang @scope blok adalah <html>. Siapa yang tahu?
:has(head) atau :has(body)
:has(head) {
/* Nice! */
}
:has(body) {
/* Even better! */
}<html> Elemen hanya boleh berisi satu <head> Dan <body> (Anakin Skywalker) sebagai anak langsung. Token lain yang dimasukkan di sini tidak valid, meskipun parser biasanya akan memindahkannya ke sana <head> atau <body> Bagaimanapun. Lebih penting lagi, tidak boleh ada unsur lain yang terkandung di dalamnya <head> atau <body>jadi ketika kita mengatakannya :has(head) atau :has(body)ini hanya dapat dirujuk <html> elemen, kecuali Anda memasukkannya secara tidak sengaja <head> atau <body> di dalam <head> atau <body>. Tapi kenapa kamu melakukan ini? Ini menjijikkan.
Ya :has(head) atau :has(body) Praktis? tidak, kecuali aku Ya Perlu dicolokkan :has()Anda juga mempelajari tentang operasi ilegal yang tidak boleh Anda lakukan pada isi HTML.
:not(* *)
:not(* *) {
/* (* *) are my starry eyes looking at CSS <3 */
}Elemen apa pun yang dikandung oleh elemen lain (* *)? Ya, :not() Itu. Satu-satunya unsur yang tidak terkandung oleh unsur lain adalah <html> elemen. *Omong-omong, ini disebut pemilih universal.
Jika Anda melempar subkombinator ke tengahnya, Anda akan mendapatkan burung lucu:
:not(* > *) {
/* Chirp, chirp */
}“Siri, simpan file ini di bawah Sama sekali tidak berguna.” (Ironisnya, Siri tidak melakukan hal seperti itu).
Pilih di CSS Pendekatan yang berbeda awalnya diposting di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Pilih #CSS #html #metode #yang #berbeda
