Terkadang kita mungkin ingin tautan internal menampilkan gaya yang berbeda dari tautan eksternal, seperti tautan eksternal. Saya ingin menambahkan ikon kecil di sebelah tautan untuk menunjukkan bahwa itu adalah tautan eksternal, untuk memberi tahu pengunjung dan membiarkan mereka mengonfirmasi apakah akan membuka di jendela baru atau di jendela ini. Kami mungkin melakukan ini:
| Berikut isi kutipannya: .luar { background:url(images/external.gif) tidak ada pengulangan di kanan atas; padding-kanan:12px; } |
Kemudian terapkan CSS ke setiap tautan eksternal. Tentu saja, ini bukan tidak mungkin, tetapi terlalu rumit.
Jadi apakah ada cara yang baik untuk mencapainya? memiliki. Anda dapat menggunakan pemilihan atribut di CSS3, tetapi metode ini tidak didukung di IE6 dan di bawahnya. Metode ini telah diterapkan di FireFox.
Sintaks dasar pemilih atribut adalah: [att^=val]
Misalnya:
| Berikut isi kutipannya: a[href^="http://www.admin5.com"] { gambar latar belakang: tidak ada; padding-kanan:0px; } |
Semua tautan yang dimulai dengan http://www.cz268.com.cn akan ditemukan dan gambar latar belakang akan dikecualikan. Dengan atribut diatas maka penanganannya akan lebih mudah
| Berikut isi kutipannya: <gaya tipe="teks/css"> A { background:url(external.gif) tidak ada pengulangan di kanan atas; padding-kanan:14px; ukuran font:12px; } a[href^="http://www.cz268.com.cn"] { gambar latar belakang: tidak ada; padding-kanan:0px; } </gaya> |
Pertama-tama tambahkan ikon ke semua tautan, lalu hapus ikon tautan yang dimulai dengan http://www.cz268.com.cn. Ini akan memungkinkan tautan eksternal menampilkan ikon dan tautan internal tidak menampilkan ikon.
Catatan: Ini berlaku untuk Firefox, tetapi tidak untuk IE.
| Berikut isi kutipannya: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |