How to use css target

css target refers to the ":target" selector, which can be used to select the currently active target element. Its usage syntax is such as "#tab:target {color:blue}". This statement means changing the anchor link to point to " #tab" element font color is blue.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommendation: "css video tutorial"

css :target selector

URL followed by the anchor name #, pointing to a specific element in the document. The linked element is the target element.

: The target selector can be used to select the currently active target element.

CSS3: target pseudo-class is used to change the style of the ID element pointed to by the anchor link URL in the page. [Related recommendation: css online manual]

For example, if you want to change the font color of the element tracing the link pointing to #tab to blue, you can write it like this:

#tab:target {color:blue}

Browser support:

Does not support IE8 and below IE versions. IE9 supports this attribute. Other non-IE core browsers such as Firefox, Chrome, etc. all support this attribute.

Usage:

:The target pseudo-class has the same usage as :hover, :link, :visited, :focus and other pseudo-classes

:target {color:blue}

Example: CSS3 :target pseudo-class Implementing the tab switching effect

The following is a brief introduction on how to use csse :target to create a tab switching effect without JavaScript

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;
}

The principle is actually very simple, that is, set the tab elements to absolute positioning, and then change their level (z-index) through the :target pseudo-class.

The above is the detailed content of How to use css target. For more information, please follow other related articles on the PHP Chinese website!