CSS3---Structural pseudo-class selector-target

Structural pseudo-Class selector-target

:targetThe selector is called the target selector, which is used to match the target element of a marker for a document (page) URL. Let's start with the last example and then do the analysis.

Sample Show

Click the link to show the hidden paragraphs.

HTML code:

#brandid=" brand ">    content for brand</div>

CSS code:

. menusection{  Display:none;} : target{/* here: Target refers to the id= "brand" div Object */  Display:block;}

Demo Result:

Analysis:

1. Specifically, the marker in the URL of the triggering element usually contains a #号followed by a marker name , which is: #brand

2.: Target is used to match the element with the ID "brand" (id= "brand" Element), the above code is the DIV element.

Multiple URLs (multiple target) processing:

As the example above, #brand与后面的id = "Brand" is the corresponding, when the same page has a lot of URLs when you can take a different name, as long as #号后对的名称与id= "" in the name corresponding to it.
As in the following example:
HTML code:

brand" >brand</a>brand" >  content for Brand</div>Jake" >brand</a>Jake "> Content for Jake</div>Aron ">brand</a></ H2><div class= "menusection" id= "Aron" > Content for aron</div>     

CSS code:

#brand: target {  background:orange;  Color: #fff;} #jake: target {  background:blue;  Color: #fff;} #aron: target {  background:red;  Color: #fff;} 

CSS3---Structural pseudo-class selector-target