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!