CSS :target hali

Maelezo na matumizi

CSS :target Kikemia kinatumika kumwengaa muundo wa kitumiaji cha kina cha kina hivi.

Maelezo:URL iliyotumika na # na jina la kina, inalinkisha kwenye kina zaidi ya wasiaja. Kina inayolinkishwa ni kina cha kina.

Mfano

Mfano 1

Kumwengaa muundo wa kitumiaji wa kitumiaji wa kilele:

:target {
  border: 2px solid darkorange;
  background-color: beige;
}

Kutenda kwa kufikia kwa matokeo

Mfano 2

Kumwengaa menyu ya chaguo:

.tab div {
  display: none;
}
.tab div:target {
  display: block;
}

Kutenda kwa kufikia kwa matokeo

Mfano 3

Kumwengaa kifungaji cha kina (kifungaji cha kina):

/* Mazingira wa kifungaji cha kina */
.modal {
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
/* Inonyesha kifungaji cha kina wakati unaingia */
.modal:target {
  display: table;
  position: absolute;
}
/* Kifungaji cha kina */
.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}
/* Muungano wa kifungaji cha kina */
.modal-dialog .modal-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Kutenda kwa kufikia kwa matokeo

Kivinjizi cha CSS

:target {
  mashirika ya css;
}

Vichujio ya teknolojia

Mwaka: CSS3

Kuzimamia kwa kawaida ya kifungaji

数字 katika tabia hizi inasema tabia za kusimamia kwa kawaida za hii kikemia kwa sababu ya kwanza za kumwengaa kwa programu ya kifungaji kwenye ingia.

Chrome Edge Firefox Safari Opera
4 9 3.5 3.2 9.5