Saat kita mendesain situs web, terkadang kita perlu membuat gaya berbeda berdasarkan atribut elemen halaman. Misalnya, menampilkan ikon tautan berbeda untuk jenis tautan berbeda. Pemilih CSS adalah teknologi yang sangat berguna, yang melaluinya kita dapat dengan mudah mencapai efek tertentu. Hari ini kami akan memperkenalkan pemilih atribut CSS dengan membuat gaya tautan yang dipersonalisasi.
Mari kita lihat demonya terlebih dahulu:
Seperti yang Anda lihat pada gambar di atas, kami telah menentukan gaya yang berbeda untuk setiap jenis tautan: jika nilai atribut href tautan a adalah tautan email "mailto", ikon email ditampilkan di belakang tautan; adalah file word, ikon dokumen word ditampilkan di belakang; ketika alamat tautannya adalah mp3, ikon pemutar musik ditampilkan; ketika alamat tautan berisi "qianduan.net", ikon beranda ditampilkan...
Faktanya, sangat mudah untuk mengimplementasikan fungsi seperti itu. Pertama mari kita lihat sintaks penyeleksi atribut CSS:
Perlu dicatat bahwa pemilih CSS, terlepas dari versi CSS 2.1 atau versi CSS 3, didukung oleh IE7 dan IE8, serta webkit, Gecko core, dan Opera. Hanya browser di bawah IE6 yang tidak mendukungnya.
Oke, mari kita terapkan gaya berikut:
1. Gaya tautan dasar. Pertama, kita menyiapkan gambar CSS Sprite, dan kita mengintegrasikan semua ikon ke dalam a.gif ini.
| A { background:url(a.gif) tanpa pengulangan kanan 4px; padding-kanan:18px; warna:#369; tinggi garis:24px; } |
Dengan cara ini, kita telah menentukan gaya default untuk semua link, dan ikon panah merah kecil akan ditampilkan di sisi kanan semua link.
2. Tentukan gaya yang dipersonalisasi Sekarang mari kita tentukan masing-masing gaya untuk berbagai jenis tautan. Faktanya, yang perlu kita lakukan saat ini adalah menentukan posisi gambar latar belakang yang berbeda (posisi latar belakang):
mailtomailtoLink email berbentuk href= Dengan gaya "mailto:[email protected]", nilai atribut hrefnya diawali dengan mailto, kemudian kita menggunakan format [att^=val]:
| a[href^="mailto:"] { posisi latar belakang:kanan -242px; } |
| a[href$=".doc"] { posisi latar belakang:kanan -160px } |
Dokumen dalam format PDF, excel, mp3 dan format lainnya juga diimplementasikan melalui metode ini.
Tautan yang berisi bidang qianduan.net. Untuk tautan yang berisi string tertentu, Anda dapat menggunakan [att*=val]:
| A { background:url(a.gif) tanpa pengulangan kanan 4px; padding-kanan:18px;warna:#369;tinggi garis:24px; } a[href^="mailto:"] {posisi latar belakang:kanan -242px;} a[href$=".doc"] {posisi latar belakang:kanan -161px} a[href$=".xls"] {posisi latar belakang:kanan -282px} a[href$=".pdf"] {posisi latar belakang:kanan -79px} a[href$=".mp3"] {posisi latar belakang:kanan -204px} a[href$=".swf"] {posisi latar belakang:kanan -120px} a[href$=".rar"] {posisi latar belakang:kanan -38px} a[href*="qianduan.net"] {background-position:right -328px} |
Dan ketika kita menggunakannya, kita tidak perlu menambahkan kelas tambahan:
| Dokumen Word |