css target bezieht sich auf den Selektor „:target“, mit dem das aktuell aktive Zielelement ausgewählt werden kann, z. B. „#tab:target {color:blue}“. um auf „#tab“ zu zeigen. Die Schriftfarbe des Elements ist blau.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Thinkpad T480-Computer.
Empfohlen: „css-Video-Tutorial“
css :target selector
URL, gefolgt vom Ankernamen #, verweist auf ein bestimmtes Element im Dokument. Das verknüpfte Element ist das Zielelement.
:Mit dem Zielselektor kann das aktuell aktive Zielelement ausgewählt werden.
CSS3: Target-Pseudoklasse wird verwendet, um den Stil des ID-Elements zu ändern, auf das die Ankerlink-URL auf der Seite verweist. [Verwandte Empfehlung: CSS-Online-Handbuch]
Wenn Sie beispielsweise die Schriftfarbe des Elements, das den Link verfolgt, der auf #tab zeigt, in Blau ändern möchten, können Sie es so schreiben:
#tab:target {color:blue}Browserunterstützung:
IE8 und darunter werden nicht unterstützt. Version, IE9 unterstützt dieses Attribut und andere Nicht-IE-Kernbrowser wie Firefox, Chrome usw. unterstützen es alle.
Verwendung:
:Ziel-Pseudoklasse hat die gleiche Verwendung wie :hover, :link, :visited, :focus und andere Pseudo-Klassen
:target {color:blue}Beispiel: CSS3:Ziel-Pseudoklasse, um einen Tab-Switching-Effekt zu erzielen
Das Folgende ist eine kurze Einführung in die Verwendung von csse :target, um einen JavaScript-freien Tab-Wechseleffekt zu erstellen
HTML-Code:
<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>
CSS-Code:
.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}Das Prinzip ist eigentlich sehr einfach, das heißt, legen Sie den Tab fest Elemente in eine absolute Positionierung umwandeln und sie dann über die :target-Pseudoklassenebene (Z-Index) ändern.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein CSS-Ziel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
