Home > Developer > Web Develop
Q: What do you do if you make it happen and click Jump to let content 1 add a background color?
Probably a lot of small partners the first reaction is to use JS, to jump tied to the point-click event, and then use the DOM to get to the content 1, the CSS style is added to it.
If I told you to use CSS to achieve, you will not face blind, and then want to curse. hahaha. In fact, with CSS3 new Pseudo-class: Target can be easily done.
This is defined by the following, such as:
and the pseudo-class compatibility is also very good, modern browsers are supported, only IE8 and the following are not supported.
Interested partners can try the demo I wrote below
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <styletype= "Text/css">Body{Background-color:#000; }a{Color:#fff;font-size:30px; }. One,.two,.three{margin:150px 0; } /*Get click events by Pseudo-class: Target*/. One:target{Color:#fff;font-size:40px; }. Two:target{Color:#CD5C5C;font-size:40px; }. Three:target{Color:Cadetblue;font-size:40px; } </style> </Head> <Body> <ahref= "#one">One</a> <ahref= "#two">Both</a> <ahref= "#three">Three</a> <DivID= "One"class= "One">123</Div> <DivID= "both"class= "both">456</Div> <DivID= "three"class= "three">789</Div> </Body></HTML>
Add: In fact, CSS3 also added a lot of useful pseudo-class. For example,: root (select the root element of the document),:d isabled (select each disabled <input> element)
See:http://www.w3school.com.cn/cssref/css_selectors.asp
CSS3 new Pseudo-class-useful: Target
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
