[Turn]css target pseudo-class E:target

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.