CSS :target pseudo-class

Definizione e uso

CSS :target I pseudoclassi vengono utilizzati per impostare lo stile dell'elemento target attivo.

Suggerimento:Un URL con # seguito dal nome dell'ancora, che linka a un elemento specifico nel documento. L'elemento linkato è l'elemento target.

Esempio

Esempio 1

Impostare lo stile dell'elemento target attivo:

:target {
  bordo: 2px solido scuroarancione;
  colore di sfondo: beige;
}

Prova personalmente

Esempio 2

Creare un menu di schede:

.tab div {
  visualizzazione: none;
}
.tab div:target {
  visualizzazione: blocco;
}

Prova personalmente

Esempio 3

Creare una finestra modale (dialogo):

/* Sfondo della finestra modale */
.modal {
  visualizzazione: none;
  sinistro: 0;
  alto: 0;
  larghezza: 100%;
  altezza: 100%;
  overflow: automatico;
  colore di sfondo: rgb(0, 0, 0);
  colore di sfondo: rgba(0, 0, 0, 0.4);
}
/* Visualizza la finestra modale quando è il target */
.modal:target {
  visualizzazione: tabella;
  posizione: assoluto;
}
/* Finestra modale */
.modal-dialog {
  visualizzazione: cellula tabella;
  allineamento verticale: medio;
}
/* Contenuto della finestra modale */
.modal-dialog .modal-content {
  margine: auto;
  colore di sfondo: #f3f3f3;
  posizione: relativa;
  riempimento: 0;
  contorno: 0;
  bordo: 1px #777 solido;
  allineamento del testo: giustificato;
  larghezza: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Prova personalmente

Sintassi CSS

:target {
  declarazioni CSS;
}

技术细节

浏览器支持

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