2. Kelas semu dan elemen semu
A.: Pemilih keturunan di belakang hover
Contoh
| A: Hover Span { Warna: #0F0; } |
menggambarkan
Suatu elemen dapat diposisikan oleh pemilih di belakang: Hover Pseudo-Class, seperti pemilih keturunan. Dalam contoh di atas, ketika mouse melayang, warna teks dalam elemen rentang dalam elemen A akan diubah.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
B. rantai-kategori semu
Contoh
| A: First-Child: Hover { Warna: #0F0; } |
menggambarkan
Kelas semu dapat dirantai untuk mempersempit pemilihan elemen. Contoh di atas akan menemukan tag pertama di bawah setiap elemen induk dan menerapkan hover pseudo-class p ke dalamnya.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
C. Di antara unsur-unsur non-anchor: melayang
Contoh
| Div: Hover { Warna: #F00; } |
menggambarkan
: Mengendapkan kelas semu dapat diterapkan pada keadaan hover elemen apa pun, bukan hanya tag A.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
D .: Kelas semu-pseudo pertama
Contoh
| Div li: anak pertama { Latar Belakang: Biru; } |
menggambarkan
Kelas yang dimodifikasi semu menempatkan elemen anak pertama dari elemen induk dari masing-masing elemen yang ditentukan.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
Serangga
Di IE7, jika elemen anak pertama yang ditempatkan memiliki komentar HTML sebelumnya, kelas pseudo anak pertama akan tidak valid
E .: Fokus kelas semu
Contoh
| A: fokus { Perbatasan: 1px solid red; } |
menggambarkan
Kelas pseudo ini menempatkan semua elemen dengan fokus keyboard.
Mendukung
| IE6 tidak IE7 tidak Yaitu ya |
F,: sebelum dan: setelah kelas semu
Contoh
| #box: sebelum { Konten: "Paragraf ini ada di depan kotak"; } #box: setelah { Konten: "Paragraf ini ada di belakang kotak"; } |
menggambarkan
Kedua elemen semu ini menambahkan konten yang dihasilkan sebelum dan sesudah elemen yang ditentukan, dan menggunakannya bersama dengan atribut konten.
Mendukung
| IE6 tidak IE7 tidak Yaitu ya |
3. Dukungan atribut
A. Ukuran aktual yang dihasilkan berdasarkan posisi
Contoh
| #box { Posisi: Absolute; TOP: 0; Kanan: 100px; Kiri: 0; Bawah: 200px; Latar Belakang: Biru; } |
menggambarkan
Mendefinisikan nilai atas, kanan, bawah, dan kiri ke elemen yang benar -benar diposisikan akan memberikan ukuran aktual (lebar dan tinggi) elemen, meskipun tidak ada pengaturan untuk membuat nilai lebar dan tinggi.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
B. Min-Height dan Min-Width
Contoh
| #box { Min-Height: 500px; Min-lebar: 300px; } |
menggambarkan
Kedua properti ini menentukan nilai minimum lebar dan tinggi elemen, memungkinkan kotak menjadi lebih besar dari nilai minimum yang ditentukan, tetapi tidak lebih kecil. Mereka dapat digunakan bersama atau secara terpisah.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
C, Max-Height dan Max-Width
Contoh
| #box { Max-Height: 500px; Max-Width: 300px; } |
menggambarkan
Kedua properti ini menentukan nilai maksimum tinggi dan lebar elemen, memungkinkan kotak menjadi lebih kecil dari nilai maksimum yang ditentukan, tetapi tidak lebih besar. Mereka juga dapat digunakan secara bersamaan atau individu.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |