Comment utiliser la cible CSS

css target fait référence au sélecteur ":target", qui peut être utilisé pour sélectionner l'élément cible actuellement actif. Sa syntaxe d'utilisation est telle que "#tab:target {color:blue}". changer le lien d'ancrage pour qu'il pointe vers la couleur de la police de l'élément " #tab " est bleue.

L'environnement d'exploitation de ce tutoriel : système windows7, version css3, ordinateur thinkpad t480.

Recommandé : "Tutoriel vidéo CSS"

css : sélecteur de cible

URL avec le nom de l'ancre suivi #, pointant vers un élément spécifique du document. L'élément lié est l'élément cible.

 : le sélecteur de cible peut être utilisé pour sélectionner l'élément cible actuellement actif.

La pseudo-classe CSS3 :target est utilisée pour changer le style de l'élément ID pointé par l'URL du lien d'ancrage dans la page. [Recommandation associée : manuel css en ligne]

Par exemple, si vous souhaitez changer la couleur de la police de l'élément traçant le lien pointant vers #tab en bleu, vous pouvez l'écrire comme ceci :

#tab:target {color:blue}

Prise en charge du navigateur :

Ne prend pas en charge les versions IE8 et inférieures. IE9 prend en charge cet attribut. D'autres navigateurs non-IE tels que Firefox, Chrome, etc. le prennent également en charge.

Utilisation :

:la pseudo-classe cible a le même usage que :hover, :link, :visited, :focus et d'autres pseudo-classes

:target {color:blue}

Exemple : CSS3 :target pseudo-class Réaliser l'effet de changement d'onglet

Ce qui suit est une brève introduction sur la façon d'utiliser csse :target pour créer un effet de changement d'onglet sans JavaScript

Code HTML :

<div class="tablist">
<ul class="tabmenu">
<li>
<a href="#tab1">标签一</a>
</li>
<li>
<a href="#tab2">标签二</a>
</li>
<li>
<a href="#tab3">标签三</a>
</li>
</ul>
<div id="tab1" class="tab_content">tab1 content</div>
<div id="tab2" class="tab_content">tab2 content</div>
<div id="tab3" class="tab_content">tab3 content</div>
</div>

Code CSS :

.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

Le principe est en fait très simple, c'est-à-dire définir les éléments tab en positionnement absolu, puis changer leur niveau (z-index) via la pseudo-classe :target.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!