masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pemilih sifat CSS

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. .


Meneruskan pembelajaran
||
<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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya tiada
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492446 permainan