[Conversion] CSS target pseudo Class E: target, css

Source: Internet
Author: User

[Conversion] CSS target pseudo Class E: target, css
CSS3 target pseudo class has to talk about those things (only CSS achieves tab switching)

Do you think target is a little familiar ?!

What I want to talk about todayNoThe <a> tag in HTML has a target attribute.

The target pseudo class is a new property of css3.

When it comes to pseudo classes, people who have css attributes must know hover, link, visited, and focus. The usage of target is exactly the same as that of them.

Official definition:

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

: Target selector can be used to select the target element of the current activity.

If this is the first time you see this definition, is it a bit confusing ?! It doesn't matter ~ Programmers must use code to communicate with each other. For example.

 

 

1234567891011121314151617181920212223 <!DOCTYPE html><style>:target{border: 2px solid  blue; }</style><body><p><a href="#news1"> Jump to content 1 </a> </p><p><a href="#news2"> Jump to content 2 </a> </p> <p id="news1"> <B> content 1... </B> </p><p id="news2"> <B> content 2... </B> </p></body>

Is there no feel after reading the code ?~ That's all right. Let's take a look.

The initialization is like this:

 

 

 

 

When I click "Jump to content 1", it becomes like this:

 

 

 

 

 

What is the difference between feel and target and other pseudo classes ?!

Haha ~ Come on, go to the topic you want to talk about !!!

By using the features of target, you can switch the tab Effect of pure css.

By using the features of target, you can switch the tab Effect of pure css.

By using the features of target, you can switch the tab Effect of pure css.

(Three important things !)

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.