Saat merancang situs web, kadang -kadang kita perlu membuat gaya yang berbeda berdasarkan atribut elemen halaman, misalnya, untuk jenis tautan yang berbeda, ikon tautan yang berbeda ditampilkan. Selektor CSS adalah teknik yang sangat berguna, melalui mereka, kita dapat dengan mudah mencapai efek tertentu. Hari ini kami akan memperkenalkan pemilih properti CSS dengan membuat gaya tautan yang dipersonalisasi.
Mari kita lihat demonstrasi terlebih dahulu:
Seperti yang dapat dilihat pada gambar di atas, kami mendefinisikan gaya yang berbeda untuk setiap tautan: ketika nilai atribut HREF tautan A adalah tautan "mailto", ikon email ditampilkan di belakang tautan; Ketika file kata digunakan, ikon dokumen kata ditampilkan di belakangnya;
Bahkan, sangat mudah untuk mengimplementasikan fungsi seperti itu.
Perlu dicatat bahwa IE7 dan IE8 mendukung pemilih CSS terlepas dari versi CSS 2.1 atau CSS, dan Webkit, Gecko Core dan Opera juga mendukungnya.
Oke, mari kita terapkan gaya ini:
1. Gaya dasar tautan pertama kami menyiapkan gambar sprite CSS, dan kami mengintegrasikan semua ikon ke dalam a.gif ini.
| A { Latar Belakang: URL (A.GIF) No-Repeat Right 4px; Padding-Right: 18px; Warna:#369; Line-Height: 24px; } |
Dengan cara ini, kami mendefinisikan gaya default untuk semua tautan, dan ikon panah merah kecil akan ditampilkan di sisi kanan semua tautan.
2. Tentukan gaya yang dipersonalisasi.
MailTomailto Mail Link berada dalam gaya href = "mailto: [email protected]".
| a [href^= "mailto:"] {{ latar belakang -positas: kanan -242px; } |
Kami umumnya percaya bahwa semua tautan file DOC berada dalam format href = "abc.doc", yang berarti bahwa alamat tautan berakhir dengan .doc, jadi kami perlu menggunakan format [att $ = val]. Gayanya adalah sebagai berikut:
| A [href $ = ". Doc"] { Latar belakang posisi: kanan -160px } |
Dokumen dalam pdf, excle, format MP3 juga diimplementasikan dengan cara ini.
Tautan yang berisi bidang qianduan.net untuk tautan yang berisi string tertentu, Anda dapat menggunakan [att*= val]:
| A { Latar Belakang: URL (A.GIF) No-Repeat Right 4px; Padding-Right: 18px; Warna:#369; garis-tinggi: 24px; } a [href^= "mailto:"] {latar belakang -posisi: kanan -242px;} A [href $ = ". Doc"] {latar belakang -posisi: kanan -161px} a [href $ = ". xls"] {latar belakang -posisi: kanan -282px} A [href $ = ". PDF"] {latar belakang -posisi: kanan -79px} a [href $ = ". mp3"] {latar belakang -posisi: kanan -204px} a [href $ = ". swf"] {latar belakang -posisi: kanan -120px} a [href $ = ". rar"] {latar belakang -posisi: kanan -38px} a [href*= "qianduan.net"] {latar belakang -posisi: kanan -328px} |
Dan ketika kita menggunakannya, kita tidak perlu menambahkan kelas tambahan:
| <a href = "abc.doc"> dokumen kata </a> |