So verwenden Sie ein CSS-Ziel

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!