Bagaimana anda menggunakan pemilih atribut dalam CSS?

Bagaimana anda menggunakan pemilih atribut dalam CSS?

Pemilih atribut dalam CSS digunakan untuk menargetkan elemen berdasarkan atribut dan nilai atribut mereka. Ini memberikan cara yang kuat untuk elemen gaya yang mempunyai atribut khusus, tanpa perlu menambah kelas atau ID tambahan. Untuk menggunakan pemilih atribut, anda boleh menulis secara langsung dalam pemilih CSS anda, dan mereka mengikuti sintaks umum: [attribute] , [attribute="value"] , atau variasi lain bergantung pada jenis pemilih atribut yang anda gunakan.

Berikut adalah contoh mudah menggunakan pemilih atribut untuk mensasarkan semua elemen <a></a> dengan atribut href :

 <code class="css">a[href] { color: blue; }</code>

Peraturan ini akan menggunakan warna biru untuk semua tag utama yang mempunyai atribut href . Anda juga boleh menargetkan nilai -nilai tertentu atribut. Sebagai contoh, untuk menghubungkan gaya yang menunjuk ke laman web luaran (bermula dengan "http"), anda boleh menggunakan:

 <code class="css">a[href^="http"] { background-color: yellow; }</code>

Dalam kes ini, ^= digunakan untuk memadankan permulaan nilai atribut. Pengendali yang berbeza boleh digunakan untuk memadankan bahagian yang berlainan dari nilai atribut, yang akan dibincangkan di bahagian seterusnya.

Apakah jenis pemilih atribut yang terdapat di CSS?

CSS menyediakan beberapa jenis pemilih atribut, masing -masing direka untuk memadankan keadaan yang berbeza dari atribut:

1. Kehadiran dan pemilih nilai:

   • [attribute] : Memilih elemen yang mempunyai atribut yang ditentukan, dengan sebarang nilai.
   • [attribute="value"] : Memilih elemen dengan atribut yang ditentukan dan nilai tepat seperti yang diberikan.
   • [attribute~="value"] : Memilih elemen dengan nilai atribut yang merupakan senarai kata-kata yang dipisahkan di ruang putih, salah satunya adalah nilai yang ditentukan.
   • [attribute|="value"] : Memilih elemen dengan nilai atribut yang merupakan senarai kata-kata yang dipisahkan hyphen, bermula dengan nilai yang ditentukan.

2. Pemilih yang sepadan dengan substring:

   • [attribute^="value"] : Memilih unsur -unsur yang nilai atributnya bermula dengan nilai yang ditentukan.
   • [attribute$="value"] : Memilih elemen yang nilai atributnya berakhir dengan nilai yang ditentukan.
   • [attribute*="value"] : Memilih elemen yang nilai atributnya mengandungi nilai yang ditentukan di mana -mana di dalamnya.

3. Sensitiviti Kes:

   • Secara lalai, pemilih atribut adalah sensitif kes. Walau bagaimanapun, anda boleh menggunakan bendera i untuk menjadikan mereka tidak sensitif, contohnya: [attribute="value" i] .

Setiap jenis pemilih ini menawarkan cara yang berbeza untuk menentukan unsur -unsur berdasarkan atribut mereka, menjadikannya lebih mudah untuk gaya mereka tanpa markup HTML tambahan.

Bagaimanakah pemilih atribut dapat meningkatkan kekhususan peraturan CSS?

Pemilih atribut boleh meningkatkan kekhususan peraturan CSS dengan membenarkan penargetan elemen yang lebih tepat berdasarkan atribut mereka. Kekhususan dalam CSS menentukan gaya mana yang digunakan apabila banyak peraturan yang bertentangan mensasarkan elemen yang sama. Lebih spesifik pemilih, semakin tinggi keutamaannya.

Inilah cara pemilih atribut menyumbang kepada kekhususan:

• Peningkatan selektiviti: Dengan mensasarkan unsur -unsur berdasarkan atribut khusus mereka, anda boleh menyempitkan pemilih anda untuk menjadi lebih spesifik. Sebagai contoh, a[hreflang="en"] lebih spesifik daripada hanya a , dan ia akan mengatasi peraturan yang hanya mensasarkan a .
• Ketergantungan yang dikurangkan pada kelas dan ID: Walaupun kelas dan ID dapat meningkatkan kekhususan, menggunakan pemilih atribut dapat mencapai hasil yang sama tanpa menambahkan markup HTML tambahan, menjaga pembersih HTML anda dan lebih semantik.
• Menggabungkan dengan pemilih lain: Pemilih atribut boleh digabungkan dengan jenis, kelas, dan pemilih ID untuk membuat peraturan yang sangat spesifik. Sebagai contoh, div[data-role="main"] mensasarkan div dengan atribut data tertentu, menjadikannya lebih spesifik daripada hanya div .

Dengan menggunakan pemilih atribut, anda boleh membuat gaya yang sangat disasarkan dan khusus, mengurangkan kemungkinan konflik gaya yang tidak diingini dan meningkatkan kebolehkerjaan CSS anda.

Bolehkah pemilih atribut digabungkan dengan pemilih CSS lain untuk penargetan yang lebih kompleks?

Ya, pemilih atribut boleh digabungkan dengan lancar dengan pemilih CSS yang lain untuk membuat peraturan yang lebih kompleks dan sasaran. Gabungan ini membolehkan kawalan halus di mana unsur-unsur digayakan dan bagaimana.

Berikut adalah beberapa contoh bagaimana pemilih atribut boleh digabungkan dengan pemilih lain:

1. Menggabungkan dengan pemilih jenis:

    <code class="css">input[type="text"] { border: 1px solid #ccc; }</code>

   Peraturan ini mensasarkan elemen input khususnya "teks" jenis, menetapkan gaya sempadan.

2. Menggabungkan dengan pemilih kelas:

    <code class="css">.button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }</code>

   Peraturan ini terpakai kepada unsur-unsur dengan button kelas yang mempunyai atribut aria-disabled yang ditetapkan kepada "benar", dengan berkesan menggayakan butang kurang upaya.

3. Menggabungkan dengan pemilih ID:

    <code class="css">#main-nav li[data-active="true"] { background-color: #eee; }</code>

   Ini menyenaraikan item dalam elemen dengan ID main-nav yang mempunyai atribut data-active yang ditetapkan kepada "benar", menonjolkan item navigasi aktif.

4. Menggunakan pemilih atribut berganda:

    <code class="css">a[href^="https"][target="_blank"] { background-image: url('external-link-icon.png'); }</code>

   Peraturan ini menambah ikon pautan luaran ke tag anchor yang kedua -duanya bermula dengan "https" dan mempunyai atribut target yang ditetapkan kepada "_blank".

Menggabungkan pemilih atribut dengan jenis pemilih lain membolehkan anda membuat peraturan yang sangat tepat yang dapat menargetkan unsur -unsur dengan kekhususan yang tinggi, menjadikan CSS anda lebih berkesan dan lebih mudah untuk diurus.

Atas ialah kandungan terperinci Bagaimana anda menggunakan pemilih atribut dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!