Bolehkah CSS Sendiri Menggayakan Elemen `` Berdasarkan `` yang Dipilih?

Menggayakan Elemen Berdasarkan : Adakah CSS Sendiri Berkebolehan?

Masalah: Percubaan untuk menggayakan elemen berdasarkan menggunakan CSS telah terbukti menjadi satu cabaran. Tidak seperti elemen pilihan, yang boleh digayakan secara langsung, menggayakan elemen yang dipilih tetap sukar difahami.

Jawapan:

CSS sahaja tidak mencukupi untuk menggayakan

elemen berdasarkan yang dipilih. Walau bagaimanapun, penyelesaian bijak yang melibatkan peristiwa onchange dan tugasan atribut data boleh memberikan anda keupayaan yang diidamkan ini.

Penyelesaian:

1. Tetapkan Nilai kepada Atribut yang dipilih data:
   Pada elemen, tambahkan peristiwa perubahan yang memberikan nilai semasa kepada atribut yang dipilih data. Ini menjadikan nilai pilihan yang dipilih tersedia untuk CSS.
2. Sasarkan Elemen Pilih:
   Buat peraturan CSS yang menyasarkan elemen berdasarkan atribut yang dipilih data. Dalam contoh ini, nilai opt3 disasarkan untuk menggayakan pilihan yang dipilih.

   <select onchange=" this.dataset.chosen = this.value; ">
       ...
       ...
   </select>

   select[data-chosen='opt3'] { 
       border: 2px solid red;
   }

   Nota: Walaupun penyelesaian ini menyediakan cara yang berkesan untuk menggayakan yang dipilih, ia mungkin tidak disokong secara meluas merentas penyemak imbas.

   Atas ialah kandungan terperinci Bolehkah CSS Sendiri Menggayakan Elemen `` Berdasarkan `` yang Dipilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

   css while select using Attribute Event this
   Kenyataan：

   Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
   Artikel sebelumnya：Adakah CSS `animation-delay` Mempengaruhi Semua Lelaran Animasi Berulang?Artikel seterusnya：Adakah CSS `animation-delay` Mempengaruhi Semua Lelaran Animasi Berulang?

   Artikel berkaitan

   Lihat lagi

   • Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS
   • Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman
   • Analisis penggunaan terperinci marquee
   • CSS标题线（删除线贯穿线效果）实现
   • CSS3中优雅降级和渐进增强的区别
   

   Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

   Tentang kitaPenafianSitemap

   © php.cn All rights reserved