Lembaran Menipu CSS Selectors

mata utama

pemilih CSS adalah bahagian kritikal dari peraturan CSS yang ditetapkan, dan mereka membolehkan anda memilih dan gaya elemen HTML khusus berdasarkan jenis, atribut, atau lokasi dalam dokumen HTML. Pemilih CSS boleh didapati dalam pelbagai jenis, termasuk pemilih sejagat, pemilih jenis elemen, pemilih ID, pemilih kelas, sub-pemilih, pemilih saudara sejagat, pemilih saudara bersebelahan, pemilih atribut, pemilih kelas pseudo, dan pemilih pseudo-elemen. Pemilih CSS Universal yang diisytiharkan dengan asterisk memilih semua elemen pada halaman, manakala pemilih jenis elemen mengesan elemen HTML dengan nama yang sama. Pemilih CSS ID yang diisytiharkan dengan tanda paun menempatkan mana -mana elemen HTML dengan atribut ID yang sepadan, manakala pemilih kelas diisytiharkan dengan titik sepadan dengan semua elemen dengan atribut kelas yang sepadan. kelas pseudo dan pemilih elemen pseudo adalah jenis pemilih khas yang membolehkan gaya untuk bahagian tertentu elemen atau unsur dalam keadaan tertentu (seperti melayang atau menjadi elemen anak pertama elemen induknya). Apakah pemilih CSS?

Pemilih CSS adalah sebahagian daripada peraturan CSS yang ditetapkan dan membolehkan anda memilih elemen untuk gaya mengikut jenis, atribut, atau di lokasi dalam dokumen HTML. Mari kita lihat semua jenis pemilih yang tersedia dan terangkan secara ringkas setiap satu. Ini adalah jadual carian cepat CSS pemilih CSS yang boleh anda rujuk.

jenis pemilih CSS

pemilih umum: setiap elemen Pemilih Jenis Elemen: Unsur -unsur jenis tertentu, seperti .

pemilih ID: Pilih elemen dengan atribut IDnya, contohnya . #myElement Pemilih Kelas: Pilih Elemen (s) oleh atribut kelasnya, contohnya . .myClass pemilih subsel: keturunan langsung elemen (sub-elemen). Universal Brother Selector: Universal Brother Elements in HTML. Jiran Brother Selector: Direct Brother Element dalam HTML. Pemilih atribut: Berdasarkan kewujudan dan/atau nilai atribut HTML, contohnya . [type="text"] pemilih kelas pseudo: Berdasarkan kewujudan kelas pseudo, seperti . :hover Pseudo-Element Selector: Untuk elemen pseudo, seperti elemen. ::before Pemilih CSS Universal

pemilih sejagat Seperti Wildcards, pilih semua elemen pada halaman. Setiap halaman HTML dibina di atas kandungan yang diletakkan dalam tag HTML. Setiap set tag mewakili elemen pada halaman. Sila lihat contoh CSS berikut, yang menggunakan pemilih sejagat:

* { color: green; font-size: 20px; line-height: 25px; } Tiga baris kod (warna, saiz fon, dan ketinggian garis) di dalam pendakap keriting akan digunakan untuk semua elemen pada halaman HTML. Seperti yang ditunjukkan di sini, pemilih sejagat diisytiharkan menggunakan asterisk. Anda juga boleh menggunakan pemilih sejagat bersempena dengan pemilih lain.

Pemilih jenis elemen CSS

juga dirujuk sebagai "pemilih jenis", yang mesti sepadan dengan elemen HTML dengan nama yang sama. Oleh itu, pemilih nav akan sepadan dengan semua elemen HTML nav , dan pemilih akan sepadan dengan semua senarai HTML yang tidak teratur atau elemen. Contoh berikut menggunakan pemilih jenis elemen untuk memadankan semua elemen:

* { color: green; font-size: 20px; line-height: 25px; } untuk menggambarkan ini, inilah bahagian HTML di mana kita akan menggunakan CSS di atas:

ul { list-style: none; border: solid 1px #ccc; } Terdapat tiga elemen utama yang membentuk sebahagian daripada halaman ini: dua unsur dan satu . CSS hanya akan digunakan untuk dua elemen , bukan untuk . Jika kita menukar pemilih jenis elemen untuk menggunakan bukan , gaya akan digunakan untuk dan bukan untuk kedua -dua elemen. Juga ambil perhatian bahawa gaya tidak akan digunakan untuk unsur -unsur dalam unsur -unsur atau . Iaitu, gaya tertentu boleh diwarisi oleh unsur -unsur dalaman ini. pemilih css id

pemilih ID menggunakan tanda hash atau pound (#) untuk mengisytiharkan sebelum rentetan aksara. Rentetan watak ditakrifkan oleh pemaju. Pemilih ini sepadan dengan mana -mana elemen HTML yang atribut ID mempunyai nilai yang sama dengan nilai pemilih, tetapi tolak simbol hash. Berikut adalah contoh:

Fish Apples Cheese

Example paragraph text.

Water Juice Maple Syrup CSS ini menggunakan pemilih ID untuk memadankan elemen HTML, contohnya:

#container { width: 960px; margin: 0 auto; } Dalam kes ini, tidak kira elemen - ia boleh menjadi jenis elemen HTML. Gaya ini terpakai selagi ia mempunyai atribut ID dengan nilai . Unsur ID di laman web harus unik. Iaitu, hanya satu elemen pada mana -mana halaman yang diberikan mempunyai ID container . Ini menjadikan pemilih ID agak tidak fleksibel, kerana gaya yang digunakan dalam set peraturan pemilih ID hanya boleh digunakan sekali setiap halaman. Sekiranya terdapat pelbagai elemen di halaman dengan ID yang sama, gaya masih akan digunakan, tetapi dari sudut pandang teknikal, HTML untuk halaman tersebut tidak sah, jadi anda perlu mengelakkan berbuat demikian. Sebagai tambahan kepada masalah ketidakcekapan, pemilih ID juga mempunyai masalah kekhususan yang sangat tinggi. container Pemilih CSS Kelas

pemilih kelas adalah yang paling berguna dari semua pemilih CSS. Ia diisytiharkan dengan titik diikuti oleh rentetan satu atau lebih aksara. Seperti pemilih ID, rentetan watak ini ditakrifkan oleh pemaju. Pemilih kelas juga sepadan dengan semua elemen pada halaman yang menetapkan atribut kelas mereka dengan nilai yang sama seperti kelas, tolak mata. Sila lihat set peraturan berikut:

Gaya ini akan digunakan untuk elemen HTML berikut:

* { color: green; font-size: 20px; line-height: 25px; } Gaya yang sama juga akan digunakan untuk mana -mana elemen HTML yang lain dengan atribut kelas dengan nilai box . Adalah bermanfaat untuk mempunyai pelbagai elemen dengan atribut kelas yang sama pada satu halaman, kerana ia membolehkan anda menggunakan semula gaya dan mengelakkan pertindihan yang tidak perlu. Selain itu, kekhususan pemilih kelas sangat rendah - lebih terperinci kemudian. Satu lagi sebab mengapa pemilih kelas menjadi sekutu berharga ialah HTML membolehkan pelbagai kelas ditambah kepada satu elemen. Ini dilakukan dengan memisahkan kelas dalam sifat kelas HTML menggunakan ruang. Berikut adalah contoh:

ul { list-style: none; border: solid 1px #ccc; } (Kandungan berikut akan diringkaskan secara ringkas kerana batasan ruang, dan maklumat penting dan contoh kod akan dikekalkan. Sila rujuk teks asal untuk penjelasan lengkap.)

Combiner Destinasi, Subcombiner, General Brother Combiner, Combiner Brother yang bersebelahan, Pemilih Atribut, Pemilih Pseudo-Kelas, Pseudo-Element Selector Kaedah gabungan dan penggunaan pemilih ini dijelaskan secara terperinci dalam teks asal, hanya maklumat utama di sini:

Destinasi Combiner: Gunakan ruang untuk memilih semua elemen keturunan di dalam elemen induk. Combinator Child: Gunakan , pilih hanya elemen anak langsung elemen induk. > Universal Brother Combinator: Gunakan , pilih semua elemen saudara berikutnya. ~ Jiran Brother Combinator: Gunakan , pilih hanya elemen saudara yang mengikuti. Pemilih atribut: Gunakan untuk memilih elemen berdasarkan atribut. Sebagai contoh . [] [type="text"] pemilih kelas pseudo: Gunakan untuk memilih elemen mengikut keadaan mereka. Contohnya , . : :hover :first-child Pseudo-Element Selector: Gunakan untuk memilih bahagian tertentu elemen. Contohnya , . :: ::before ::after FAQ (FAQ) Soalan -soalan yang sering ditanya mengenai pemilih CSS, jawapan terperinci disediakan dalam teks asal, dan tidak akan dibincangkan di sini. melalui ringkasan ringkas di atas, saya harap ia dapat membantu anda memahami konsep teras dan penggunaan pemilih CSS. Untuk penjelasan yang lebih terperinci, sila rujuk teks asal.

Lembaran Menipu CSS Selectors

Artikel berkaitan