CSS3 Target pseudo-class has to say those things (plain CSS implements tab switching)
Do you think target looks familiar?!
This is not the HTML <a> tag that has a target property.
The target pseudo-class is a new property of CSS3.
When it comes to pseudo-classes, the CSS properties are sure to know: hover,: Link,: Visited,: Focus, etc., target usage is expatiating with them.
The official definition is:
The URL is followed by an anchor name #, which points to a specific element within the document. The linked element is the target element.
: The target selector can be used to pick the destination element for the current activity.
If you see this definition for the first time, is it a bit confusing?! It doesn't matter ~ Programmers use code to communicate. Give me a chestnut.
1234567891011121314151617181920212223 |
<!DOCTYPE html>
<style>
:target
{
border: 2px solid blue;
}
</style>
<body>
<p><a href=
"#news1"
>跳转至内容 1</a></p>
<p><a href=
"#news2"
>跳转至内容 2</a></p>
<p id=
"news1"
><b>内容 1...</b></p>
<p id=
"news2"
><b>内容 2...</b></p>
</body>
|
Reading the code is not Feel?~that ' s all right.
The initialization is this:
When I click "Jump to Content 1", it becomes this:
Is there a feel to target and other pseudo-class?!
haha ~ come, directly into the subject to speak!!!
Using the target feature, you can switch the tab effect of the pure CSS.
Using the target feature, you can switch the tab effect of the pure CSS.
Using the target feature, you can switch the tab effect of the pure CSS.
(important thing to say three times!) )
[Turn]css target pseudo-class E:target