Kuasai pemilih lanjutan: Tingkatkan kemahiran CSS anda

Tingkatkan kemahiran CSS anda: Kuasai keajaiban pemilih lanjutan

CSS (Cascading Style Sheets) ialah bahagian penting dalam reka bentuk dan pembangunan web. Menguasai asas CSS adalah penting untuk mencipta halaman web yang cantik dan berfungsi. Walau bagaimanapun, jika anda ingin melangkah lebih jauh dan ingin meningkatkan kemahiran CSS anda dan mencipta reka bentuk web yang lebih kompleks dan unik, maka menguasai pemilih lanjutan akan menjadi kunci.

Pemilih lanjutan membolehkan pembangun menggunakan kaedah yang lebih canggih untuk memilih dan menggayakan elemen halaman web, melangkaui pemilih teg dan pemilih kelas yang mudah. Berikut akan memperkenalkan beberapa pemilih lanjutan yang biasa digunakan, serta penggunaannya dan contoh kod khusus.

<li>Pemilih Atribut
Pemilih Atribut membolehkan anda memilih elemen berdasarkan atribut dan nilai atributnya. Pemilih atribut biasa termasuk yang berikut: <li>[attr]: Pilih elemen dengan atribut tertentu [attr]：选择具有指定属性的元素 <li> [attr=value]：选择具有指定属性且属性值等于给定值的元素 <li> [attr^=value]：选择具有指定属性且属性值以给定值开头的元素 <li> [attr$=value]：选择具有指定属性且属性值以给定值结尾的元素 <li> [attr*=value]：选择具有指定属性且属性值包含给定值的元素

例如，要选择所有带有"data-"开头的属性的元素，可以使用属性选择器：[data-]。要选择所有class属性以"btn-"开头的元素，可以使用属性选择器：[class^="btn-"]。

<li>伪类选择器
伪类选择器允许你根据元素的状态或特定条件来选择元素。一些常见的伪类选择器包括： <li> :hover：选择鼠标悬停在上面的元素 <li> :active：选择处于活动状态的元素（例如点击时） <li> :visited：选择已访问过的链接 <li> :nth-child(n)：选择在其父元素中的第n个子元素 <li> :first-child：选择在其父元素中的第一个子元素 <li> :last-child：选择在其父元素中的最后一个子元素

例如，要选择表格中的奇数行，可以使用伪类选择器：tr:nth-child(odd)。要选择表格中的第一行，可以使用伪类选择器：tr:first-child。

<li>组合选择器
组合选择器允许你结合多个选择器来选择元素。常见的组合选择器包括： <li> selector1, selector2：选择所有符合selector1或selector2的元素 <li> selector1 selector2：选择符合selector1的元素的后代元素中符合selector2的元素 <li> selector1 > selector2：选择符合selector1的元素的子元素中符合selector2的元素 <li> selector1 + selector2：选择符合selector1的元素的后面紧邻的符合selector2的元素 <li> selector1 ~ selector2：选择符合selector1的元素后面的所有符合selector2的元素

例如，要选择<div>中的所有<code><p></p>和<span></span>元素，可以使用组合选择器：div p, div span。要选择<ul></ul>的直接子元素<li>，可以使用组合选择器：ul > li[attr=value]: Pilih elemen dengan atribut dan atribut tertentu Elemen yang nilainya adalah sama dengan nilai yang diberikan<p></p> [attr^=value]: Memilih elemen dengan atribut yang ditentukan dan nilai atribut bermula dengan nilai yang diberikan<p></p> [attr$=value] code> code>: Pilih elemen dengan atribut yang ditentukan dan nilai atribut berakhir dengan nilai yang diberikan<p></p> <code>[attr*=value]: Pilih elemen dengan atribut yang ditentukan dan nilai atribut mengandungi nilai yang diberikan <p></p>Sebagai contoh, untuk memilih semua elemen dengan atribut bermula dengan "data-", anda boleh menggunakan pemilih atribut: [data-]. Untuk memilih semua elemen yang atribut kelasnya bermula dengan "btn-", anda boleh menggunakan pemilih atribut: [class^="btn-"]. 🎜

🎜Pemilih kelas pseudo🎜Pemilih kelas pseudo membolehkan anda memilih elemen berdasarkan keadaan atau keadaan khusus mereka. Beberapa pemilih pseudo biasa termasuk: 🎜🎜:tuding

: memilih elemen yang dituding di atas 🎜🎜:aktif: memilih elemen yang aktif (cth. masa klik) 🎜🎜:visited: Pilih pautan yang dilawati 🎜🎜:nth-child(n): Pilih elemen anak ke-nth dalam elemen induknya🎜🎜 :first-child kod>: Pilih elemen anak pertama dalam elemen induknya🎜🎜<kod>:anak terakhir</kod>: Pilih elemen anak terakhir dalam elemen induknya🎜 🎜Sebagai contoh, untuk memilih baris bernombor ganjil dalam jadual, anda boleh menggunakan pemilih kelas pseudo: tr:nth-child(odd). Untuk memilih baris pertama dalam jadual, anda boleh menggunakan pemilih kelas pseudo: tr:first-child. 🎜

🎜Pemilih Gabungan🎜Pemilih Gabungan membolehkan anda menggabungkan berbilang pemilih untuk memilih elemen. Pemilih gabungan biasa termasuk: 🎜🎜pemilih1, pemilih2: Pilih semua elemen yang sepadan dengan pemilih1 atau pemilih2 🎜🎜pemilih1 pemilih2: Pilih elemen yang sepadan dengan keturunan elemen yang sepadan dengan Elemen pemilih1 daripada selector2🎜🎜selector1 > selector2: Pilih elemen yang sepadan dengan selector2 antara elemen anak elemen yang sepadan dengan selector1🎜🎜selector1 + selector2: Pilih elemen yang sepadan dengan selector1 selepas Elemen bersebelahan yang sepadan dengan pemilih2🎜🎜pemilih1 ~ pemilih2: Pilih semua elemen yang sepadan dengan pemilih2 selepas elemen yang sepadan dengan pemilih1🎜

🎜Sebagai contoh, untuk memilih

Semua elemen <p></p> dan <span></span> dalam kod> boleh menggunakan pemilih gabungan: div p, div span. Untuk memilih elemen anak langsung <li> <ul></ul>, gunakan pemilih gabungan: ul > 🎜🎜Menguasai pemilih lanjutan akan memberi anda pemahaman yang lebih mendalam tentang CSS, membawa lebih fleksibiliti dan kreativiti kepada reka bentuk dan pembangunan web anda. Dengan menggunakan pemilih atribut, pemilih kelas pseudo dan pemilih gabungan, anda boleh memilih dan menggayakan elemen tertentu dengan ketepatan. 🎜🎜Berikut ialah contoh kod khusus yang menunjukkan cara menggunakan pemilih atribut dan pemilih kelas pseudo untuk mencipta elemen butang dengan kesan khas: 🎜<pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; /* 属性选择器 */ button[data-color=&quot;red&quot;] { color: white; background-color: red; } button[data-color=&quot;blue&quot;] { color: white; background-color: blue; } /* 伪类选择器 */ button:hover { font-weight: bold; } button:active { transform: scale(0.9); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;button data-color=&quot;red&quot;&gt;红色按钮&lt;/button&gt; &lt;button data-color=&quot;blue&quot;&gt;蓝色按钮&lt;/button&gt; &lt;/body&gt; &lt;/html&gt;</pre>🎜Kod di atas menggunakan pemilih atribut dan pemilih kelas pseudo untuk menyedari apabila tetikus Teks menjadi tebal apabila menuding di atas butang, dan mengecut kepada kesan 90% apabila butang diklik. Dengan menggunakan pemilih lanjutan, kami boleh menambah gaya berbeza pada butang berbeza dengan mudah. 🎜🎜Ringkasnya, untuk meningkatkan kemahiran CSS anda, menguasai pemilih lanjutan ialah langkah yang sangat penting. Dengan mempelajari dan menggunakan pemilih atribut, pemilih kelas pseudo dan pemilih gabungan, anda akan dapat mencipta reka bentuk web yang lebih kompleks dan unik, menjadikan halaman web anda lebih menarik dan mengagumkan secara visual. 🎜