css target refers to the ":target" selector, which can be used to select the target element of the current activity. The syntax is "#tab:target {color:blue}", which means to change the element font of the anchor link to "#tab" The color is blue.
The operating environment of this tutorial: windows7 system, css3 version, this method is applicable to all brand computers.
Recommendation: "css video tutorial" The
css :target selector
URL is followed by the anchor name #, pointing to a specific element in the document. This linked element is the target element.
The :target selector can be used to select the currently active target element.
The 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 that the description link points to #tab to blue, you can write it like this:
1
#tab:target {color:blue}
Browser support:
does not support IE8 and For the following IE versions, IE9 supports this attribute, and other non-IE core browsers such as Firefox, Chrome, etc. are supported.
Usage: The
:target pseudo-class has the same usage as :hover, :link, :visited, :focus and other pseudo-classes.
1
:target {color:blue}
Example: CSS3 :target pseudo-class to achieve the Tab switching effect
The following briefly introduces how to use csse :target to make a tab switching effect
HTML code without JavaScript :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
tab1 content
tab2 content
tab3 content
CSS code:
1
2
3
4
5
6
.tab_content { position: absolute; } #tab1:target, #tab2:target, #tab3:target { z-index: 1; }The principle is actually very simple, that is, set the tab element to Absolutely locate absolute, and then change their level (z-index) through the :target pseudo-class.