CSS3 Atribut Pemilih Menyasarkan Jenis Fail

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

The pemilih atribut adalah ciri yang sangat berguna untuk memilih elemen tanpa menambahkan keperluan ID atau kelas. Selagi unsur yang disasarkan mempunyai atribut seperti href, src dan jenis kita tidak perlu berbuat demikian.

Pemilih atribut sebenarnya telah wujud sejak CSS 2.1, dan sekarang dengan beberapa jenis pemilih atribut yang ditambahkan dalam spesifikasi CSS3, kami dapat menargetkan atribut elemen lebih khusus lagi.

Dan, dalam jawatan ini, kita akan menggunakan salah satu sintaks untuk memilih jenis fail yang dimasukkan sebagai sebahagian daripada nilai atribut.

Sokongan Sintaks dan Penyemak Imbas

The jenis fail sentiasa pada akhir nama fail. Jadi, untuk memilih itu jenis fail kita boleh menggunakan sintaks yang berikut [attr $ = "value"]. Sintaks ini menggunakan $ = pengendali yang akan menyasarkan akhir nilai atribut, sebagai contoh:

 a [href $ = ". pdf"]: sebelum background: url ('... /images/document-pdf-text.png') no-repeat;  

Coretan di atas akan memilih setiap pautan yang nilai atribut berakhir .pdf dan masukkan kata-dokumen-ikon di dalam : sebelum pseudo-element.

Sumber Ikon PDF: Ikon Fugue

Walaupun ini adalah penggunaan umum pemilih ini, kami pasti dapat melampaui hal tersebut.

Mengenai keserasian penyemak imbas; walaupun sintaks ini secara rasmi diperkenalkan sebagai spesifikasi CSS3, ia sebenarnya telah disokong sejak Internet Explorer 7, jadi anda boleh menerapkannya dengan selamat melalui semua reka bentuk anda.

Contohnya

Anda tidak akan pernah tahu, jika anda tidak pernah cuba. Kami hanya perlu mencuba sesuatu yang baru untuk mendapatkan pemahaman yang lebih baik mengenai sesuatu yang tidak kita fahami. Jadi di sini, kami akan menunjukkan bagaimana sintaks ini boleh menjadi sangat berguna dan berguna untuk menyasarkan elemen dalam struktur HTML tertentu yang digunakan untuk menjadi agak sukar untuk memohon hanya menggunakan CSS biasa.

Di bawah ini, kita ada Struktur HTML5 untuk menyenaraikan tiga imej dengan kapsyennya. Ia hanya untuk tujuan demonstrasi, markup anda tidak sepatutnya sama seperti coretan berikut (contohnya anda hanya mempunyai satu imej atau tiga imej lagi), tetapi perkara itu adalah anda dapat mengetahui bagaimana sintaks ini boleh digunakan dalam struktur HTML tertentu.

Setiap imej yang disenaraikan di atas mempunyai format atau pelanjutan berikut, jpg, png, dan gif. Mereka juga mempunyai kapsyen yang mewakili lanjutan imejnya; keterangan ini kemudian akan bertindak sebagai label imej.

Jadi, inilah pelan, kami akan memberikan warna latar belakang yang berbeza untuk kapsyen untuk setiap pelanjutan imej yang berlainan. Imej JPG akan mendapat hijau warna kapsyen, PNG akan mendapat biru, dan akhirnya gif akan mendapat ungu.

Pertama, mari kita tetapkan kedudukan tag angka secara relatif, kerana kita akan memohon mutlak kedudukan untuk kapsyen.

 angka kedudukan: relatif;  

Tambah sedikit hiasan untuk imej dengan sempadan dan bayang-bayang.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); kotak-bayang: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Dan kemudian, kami menetapkan gaya lalai dan kedudukan untuk kapsyen. Kapsyen imej atau label akan mempunyai persegi 50px.

 img + figcaption color: #fff; kedudukan: mutlak; atas: 0; betul: 0; lebar: 50px; ketinggian: 50px; garis ketinggian: 50px; teks-align: center;  

Sekarang sudah waktunya untuk menambah warna latar belakang. Untuk berbuat demikian, kita boleh menggabungkan pemilih sifat dengan pemilih saudara yang bersebelahan, +.

 img [src $ = ". jpg"] + figcaption background-color: # a8b700;  

Coretan di atas akan menyasarkan setiap imej dengan atribut sumber yang berakhir dengan .jpg, maka pemilih bersebelahan akan mencari unsur di sebelahnya. Dalam kes ini, figcaption akan ditambah dengan # a8b700 warna latar belakang.

Dan inilah semua kod untuk keseluruhan format imej, .png dan .gif.

 img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

Sekarang, mari kita lihat bagaimana ternyata secara langsung dari pautan demo di bawah ini, atau sebaliknya anda boleh memuat turun sumber untuk memeriksa di luar talian.

• Demo
• Muat turun Sumber

Sumber imej adalah seperti berikut: MacPro 1, MacPro 2 dan MacPro 3

Kesimpulannya

Kami berharap anda dapat melihat sisi elegan gaya menggunakan pemilih khas, seperti apa yang telah kami cuba tunjukkan di atas menggunakan pemilih sifat. Oleh itu, apabila anda sedang menggayakan HTML anda, kami sangat mengesyorkan anda melakukan penyelidikan sama ada gaya anda boleh digunakan dengan menggunakan beberapa pemilih khas, daripada merosakkan markup berstruktur anda dengan tambahan kelas atau ID.

Terdapat dua lagi pemilih baru jenis ini yang akan kami tutupi dalam jawatan seterusnya, jadi tunggu.