Dalam artikel ini, kita akan bercakap tentang pemilih CSS3, alat yang sangat berkuasa untuk semua orang yang ingin melakukan lebih banyak sambil menulis kurang. Sama ada anda baru memulakan atau meningkatkan kemahiran anda, panduan ini akan membimbing anda melalui asas kepada perkara lanjutan.
Bersedia untuk meningkatkan kemahiran CSS anda? Jom mulakan!
Pemilih ialah alat yang kami gunakan untuk memilih elemen tertentu daripada pepohon HTML. Pemilih CSS3 asas, seperti namanya, adalah pemilih asas yang perlu ada pada setiap pembangun dalam kit alat mereka. Ia termasuk pemilih Jenis , Kelas , ID , Universal dan Atribut. Mari kita mendalami setiap perkara ini.
Pemilih ini menyasarkan elemen HTML berdasarkan nama teg mereka. Contohnya, p { warna: biru; } akan menggayakan semua elemen perenggan dengan warna biru.
Pemilih ini menyasarkan elemen HTML berdasarkan atribut kelas mereka. Contohnya, .alert { color: red; } akan menggayakan semua elemen dengan kelas "alert" berwarna merah.
Pemilih ini menyasarkan elemen unik yang mempunyai atribut id khusus. Contohnya, #navbar { background-color: black; } akan menggayakan elemen dengan id "navbar" dengan latar belakang hitam.
Pemilih ini menyasarkan semua elemen pada halaman. Contohnya, * { margin: 0; } akan mengalih keluar jidar daripada semua elemen pada halaman.
Pemilih ini menyasarkan elemen berdasarkan atribut dan nilainya. Contohnya, a[href="https://google.com"] { color: blue; } akan menggayakan semua pautan yang menghala ke Google dengan warna biru.
Pemilih Jenis : h1 { warna: hijau; } akan mewarnakan semua tajuk h1 hijau.
Pemilih Jenis : p { saiz fon: 16px; } akan memilih semua elemen perenggan (
) dan menetapkan saiz fonnya kepada 16 piksel.
Pemilih Kelas : .info { saiz fon: 18px; } akan menetapkan saiz fon semua elemen dengan kelas "info" kepada 18px.
Pemilih Kelas : .highlight { warna latar belakang: kuning; } akan memilih semua elemen dengan kelas "serlahkan" dan menetapkan warna latar belakangnya kepada kuning.
Pemilih ID : #footer { padding: 20px; } akan menambah padding 20px pada elemen dengan id "footer".
Pemilih ID : #header { ketinggian: 60px; } akan memilih elemen dengan "pengepala" ID dan menetapkan ketinggiannya kepada 60 piksel.
Pemilih Universal : * { font-family: Arial, sans-serif; } akan menetapkan fon semua elemen kepada Arial.
Pemilih Universal : * { saiz kotak: kotak sempadan; } akan memilih semua elemen pada halaman dan menetapkan sifat saiz kotaknya kepada "kotak sempadan", yang termasuk pelapik dan jidar dalam jumlah lebar dan tinggi elemen.
Pemilih Atribut : img[alt] { jidar: 2px hitam pepejal; } akan menambah sempadan pada semua imej yang mempunyai atribut alt.
Pemilih Atribut : input[type="text"] { lebar: 100%; } - Ini akan memilih semua elemen input dengan jenis "teks" dan menetapkan lebarnya kepada 100% daripada bekas induknya.
Pemilih kelas pseudo ialah ciri berkuasa dalam CSS yang membolehkan kami memilih dan menggayakan elemen berdasarkan keadaan atau kedudukannya dalam struktur dokumen dan bukannya jenis, atribut atau kelasnya. Mereka memainkan peranan penting dalam mencipta reka bentuk yang dinamik dan responsif.
Kelas pseudo dinamik termasuk gaya yang berubah berdasarkan interaksi pengguna. Contohnya, a:hover { color: red; } akan menukar warna pautan kepada merah apabila dituding di atas.
Kelas pseudo struktur memilih elemen berdasarkan kedudukannya dalam struktur dokumen. Contohnya, p:first-child { font-weight: bold; } akan menjadikan perenggan pertama tebal dalam elemen yang mengandunginya.
Kelas pseudo penolakan, :not(), mengecualikan elemen tertentu daripada pilihan. Contohnya, div:not(.highlight) { background-color: yellow; } akan menukar warna latar belakang semua div kepada kuning, kecuali yang mempunyai kelas "highlight".
Kelas pseudo input digunakan untuk menggayakan elemen bentuk berdasarkan keadaannya. Contohnya, input:disabled { opacity: 0.5; } akan menggayakan medan input yang dilumpuhkan dengan separuh kelegapan.
Kelas Pseudo Dinamik : a:fokus { garis besar: tiada; } akan mengalih keluar garis fokus daripada pautan apabila ia diklik atau dilayari melalui papan kekunci.
Kelas Pseudo Dinamik : butang:aktif { warna latar belakang: merah; } akan menukar warna latar belakang butang kepada merah apabila ia diklik.
Kelas Pseudo Struktur : li:anak terakhir { warna: merah; } akan mewarnakan item senarai terakhir dengan merah dalam setiap senarai.
Kelas Pseudo Struktur : p:nth-child(2) { color: blue; } akan memilih perenggan kedua dalam elemen induknya dan mewarnakan teks dengan biru.
Kelas Pseudo Penafian : p:bukan(.tiada sempadan) { sempadan: 1px hitam pejal; } akan menambah sempadan pada semua perenggan yang tidak mempunyai kelas "tiada sempadan".
Kelas Pseudo Negasi : div:not(#exclude) { sempadan: 1px hijau pepejal; } akan menambah sempadan pada semua elemen div yang tidak mempunyai id "kecualikan".
Input Pseudo-Class : input:checked { background-color: green; } akan menukar warna latar belakang elemen input yang ditandai kepada hijau.
Input Pseudo-Class : input:sah { sempadan: 2px hijau pepejal; } akan menambah sempadan hijau pada semua medan input yang sah berdasarkan peraturan pengesahannya.
Pemilih elemen pseudo membolehkan kami menggayakan bahagian tertentu dokumen. Ia boleh digunakan untuk menggayakan huruf pertama, atau baris, elemen atau memasukkan kandungan sebelum atau selepas elemen HTML.
Unsur pseudo ini membolehkan kami memasukkan kandungan sebelum atau selepas kandungan elemen.
Contoh:
p::before {
content: "Read this - ";
color: red;
}
Ini akan memasukkan "Baca ini - " sebelum kandungan setiap perenggan dan mewarnakannya dengan merah.
Unsur pseudo ini digunakan untuk menggayakan huruf pertama atau baris pertama blok teks.
Contoh:
p::first-letter {
font-size: 20px;
color: blue;
}
Ini akan menjadikan huruf pertama setiap perenggan bersaiz 20px dan berwarna biru.
p::selepas { kandungan: "*"; } - Ini akan menambah asterisk (*) selepas setiap perenggan.
.warning::sebelum { kandungan: "AMARAN: "; font-weight: tebal; warna: merah; } - Ini akan menambah "AMARAN: " sebelum kandungan elemen dengan kelas "amaran". Teks akan menjadi tebal dan merah.
petikan blok::baris pertama { font-weight: bold; } - Ini akan menjadikan baris pertama setiap petikan blok menjadi tebal.
div::huruf pertama { text-transform: huruf besar; } - Ini akan mengubah huruf pertama setiap div menjadi huruf besar.
h1::selepas { kandungan: ""; warna: hijau; } - Ini akan menambah tanda semak hijau selepas setiap elemen h1.
Unsur pseudo dan kelas pseudo ialah beberapa pemilih kegemaran saya dan untuk benar-benar memahaminya, saya cadangkan anda melakukan banyak latihan.
Berikut ialah beberapa contoh pada Codepen yang anda boleh mencuba:
Contoh 1
Tutorial
Contoh 2
Tutorial
Contoh 3
Tutorial
Contoh ini kelihatan mudah tetapi jika anda menyemak kod, anda akan dapati ia dibuat dengan sangat sedikit kelas pseudo!
Pemilih penggabung dalam CSS ialah cara yang berkuasa untuk memilih elemen tertentu yang memenuhi kriteria perhubungan tertentu dengan elemen lain. Pemilih ini membenarkan kami menyasarkan elemen berdasarkan perhubungannya dalam pepohon dokumen, seperti jika elemen ialah anak, keturunan atau adik-beradik unsur lain.
Penggabung keturunan dilambangkan dengan ruang. Ia memilih unsur yang merupakan keturunan unsur tertentu.
Contoh:
div p { color: blue;}
Ini akan memilih semua
unsur yang merupakan keturunan
div p { background-color: yellow;}
Ini akan memilih semua
unsur yang merupakan keturunan
Penggabung kanak-kanak dilambangkan dengan >. Ia memilih elemen yang merupakan anak langsung unsur tertentu.
Contoh:
div > p { color: blue;}
Ini akan memilih semua
elemen yang merupakan anak langsung kepada
div > p { border: 1px solid red;}
This will select all
elements that are direct children of a
An adjacent sibling combinator is denoted by +. It selects an element that is directly after another specific element.
Example:
div + p { color: blue;}
This will select any
element that is directly after a
A general sibling combinator is denoted by ~. It selects elements that are siblings of a certain element.
Example:
div ~ p { color: blue;}
This will select all
elements that are siblings of a
Advanced CSS3 selectors provide more precise targeting capabilities than basic selectors. These include attribute selectors with various matchers and nth-child/nth-of-type selectors.
Attribute selectors can be used with various matchers to select elements based on specific conditions related to their attributes.
Example:
input[type="text"] {
color: blue;
}
This will select all input elements with the type attribute of "text" and color the text blue.
The nth-child and nth-of-type selectors are used to select elements based on their position in the parent element.
Example:
p:nth-child(2) {
color: red;
}
This will select the second child paragraph of its parent element and color the text red.
Attribute Selector with Matcher: a[href^="https"] {font-style: italic;} - This will select all links that have an href attribute that starts with "https" and make the text italic.
Attribute Selector with Matcher: input[type$="text"] {background-color: yellow;} - This will select all input elements that have a type attribute that ends with "text" and give them a yellow background.
Nth-child Selector: li:nth-child(odd) {background-color: grey;} - This will select all odd-numbered list items and give them a grey background.
Nth-of-type Selector: p:nth-of-type(3n) {font-weight: bold;} - This will select every third paragraph and make the text bold.
Use the Right Selector : The key to using CSS3 selectors effectively is to use the right selector for the job. For instance, use class selectors when you want to style a group of elements and ID selectors for unique elements.
Avoid Over-Specification : Over-specifying selectors can make your CSS hard to maintain. Stick to simple selectors as much as possible.
Use Shorthand Properties : Shorthand properties can make your CSS cleaner and easier to read. For example, use margin: 0 auto; instead of margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;.
Group Selectors : If multiple selectors share the same style declaration, group them together to keep your CSS DRY (Don't Repeat Yourself).
Comment Your Code : Commenting your CSS can help you and others understand what your code does, especially when using complex selectors.
Use Pseudo-classes and Pseudo-elements : These can help you target elements based on their state or position in the document, which can make your CSS more dynamic and responsive.
Keep Specificity Low : Overly specific selectors can lead to specificity wars, making it hard to override styles later. Keep your specificity as low as possible.
Test Across Different Browsers : Different browsers can interpret CSS selectors differently. Always test your CSS across different browsers to ensure consistency.
In conclusion, selectors, ranging from basic type, class, and ID selectors to advanced pseudo-classes, pseudo-elements, and combinators, provide a powerful toolset for styling HTML elements. By understanding and applying these selectors, you can create dynamic, responsive, and aesthetically pleasing websites.
However, it's important to follow best practices such as using the right selector for the job, avoiding over-specification, grouping selectors, and testing across different browsers to ensure the maintainability and consistency of your CSS code.
? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.
? Jika anda menyukai artikel ini, pertimbangkan untuk berkongsinya.
? Semua pautan | X | LinkedIn
Atas ialah kandungan terperinci Menguasai CSSelectors: Panduan Lengkap dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
