Pemilih Atribut CSS
CSS 2 memperkenalkan pemilih atribut.
Pemilih atribut boleh memilih elemen berdasarkan atribut dan nilai atributnya.
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1: [att*=val];Penjelasan: Jika nilai atribut atribut elemen yang diwakili oleh att mengandungi aksara yang ditentukan oleh val, maka elemen menggunakan gaya ini.
<html> <head> <style> [id*=section]{ background-color:red; } </style> </head> <body> <p id="sections9999"> </p> </body> </html>
Kesan operasi: Kecuali ie Lain-lain boleh dipaparkan seperti biasa. .
2:[att^=val];Penjelasan: Jika nilai atribut atribut elemen yang diwakili oleh att bermula dengan aksara yang ditentukan oleh val, maka elemen menggunakan gaya ini. (Sebenarnya, anda boleh faham bahawa ^ sepadan dengan permulaan ungkapan biasa...)
Kesan operasi: Kecuali IE, semua yang lain boleh dipaparkan secara normal. .
3:[att$=val];Penjelasan: Jika nilai atribut atribut elemen yang diwakili oleh att berakhir dengan aksara yang ditentukan oleh val, maka elemen menggunakan gaya ini. (Dalam ungkapan biasa, $ sepadan dengan penghujungnya...)
Kesan operasi: Kecuali IE, semua yang lain boleh dipaparkan secara normal. .
Mari kita lihat contoh lain:
<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style> a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{ content:"web网页"; color:red; } a[href$=jpg]:after{ content:"JPG图像素材"; color:green; } </style> </head> <body> <ul> <li><a href="#">博客</a></li> <li><a href="#">css选择器</a></li> <li><a href="#">图像素材</a></li> </ul> </body> </html>
Kesan operasi: Kecuali IE, semua yang lain boleh dipaparkan seperti biasa. .