CSS :target pseudo-class

Definisi dan penggunaan

CSS :target Pseudoklas digunakan untuk menata gaya elemen target aktif.

Petunjuk:URL dengan # diikuti nama tanda tali, menghubungkan ke elemen khusus dalam dokumen. Elemen yang dihubungkan adalah elemen target.

Contoh

Contoh 1

Atur gaya elemen target aktif:

:target {
  batas: 2px solid oranye gelap;
  warna latar belakang: krim;
}

亲自试一试

Contoh 2

Buat menu tab:

.tab div {
  display: tak tampak;
}
.tab div:target {
  display: blok;
}

亲自试一试

Contoh 3

Buat boks modal (dialog):

/* latar belakang boks modal */
.modal {
  display: tak tampak;
  kiri: 0;
  atas: 0;
  lebar: 100%;
  tinggi: 100%;
  keluar laut: otomatis;
  warna latar belakang: rgb(0, 0, 0);
  warna latar belakang: rgba(0, 0, 0, 0.4);
}
/* tampilkan boks modal saat target */
.modal:target {
  display: tabel;
  posisi: absolut;
}
/* boks modal */
.modal-dialog {
  display: seluruh seluler;
  vertical-align: tengah;
}
/* konten boks modal */
.modal-dialog .modal-content {
  margin: otomatis;
  warna latar belakang: #f3f3f3;
  posisi: relatif;
  padding: 0;
  garis luar: 0;
  batas: 1px #777 padat;
  tebal tulisan: justified;
  lebar: 80%;
  bayangan kotak: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

亲自试一试

CSS 语法

:target {
  pernyataan css;
}

技术细节

浏览器支持

数字在表格中指定了完全支持该伪类的首个浏览器版本。