: Target pseudo-Class make Tab tab

: The purpose of the target pseudo-class is to highlight the active HTML anchor, and here is a simple example:

HTML code:

1 <Div>2     <ahref= "#demo1">Click here</a>3 </Div>4 <DivID= "Demo1">Test results</Div>

CSS code:

1 : Target {2   color: #343434;  3   border: 1px solid red;  4   background-color: red;  5 }

#demo1写在链接里, which means pointing to a target element, while the Id=demo1 div element is the target element that you want to select. The effect of this code operation is:

After clicking the a element, the style of the target element #demo1 is changed, and the style of the change is written by the CSS code.

: Target is a new attribute of CSS3, and the most common place to use it now is Tab tab creation.

The previous Tab tab generally uses JS or jquery to achieve, now just use the CSS3: target can be done.

code example:

HTML code:

1 <ulclass= "Tab-title">2     <Li><ahref= "#music">Music</a></Li>3     <Li><ahref= "#fun">Entertainment</a></Li>4     <Li><ahref= "#photo">Photography</a></Li>5 </ul>6 <DivID= "Music">Music</Div>7 <DivID= "Fun">Entertainment</Div>8 <DivID= "Photo">Photography</Div>

CSS code:

1 ul{2 width:303px;3 Height:40px;4 text-align:Center;5 Line-height:40px;6 List-style:None;7 Border:1px solid #333;8 margin:40px Auto 0;9 Border-top-left-radius:10px;Ten Border-top-right-radius:10px; One} A Li{ - float: Left; - width:100px; the Border-right:1px solid #333; - Display:Table; -} - Li:nth-child (3){ + Border:None; -} + li > A{ A Color:#333; at text-decoration:None; - Display:Table-cell; - vertical-align:Middle; -} - li:nth-child (1) > a{ - Border-top-left-radius:10px; in} - Li:nth-child (3) > a{ to Border-top-right-radius:10px; +} - li > A:hover{ the Background-color:#8BB7F9; *} $ Div{Panax Notoginseng position:Absolute; Have to -  Left:161px; the width:303px; + Height:150px; A Line-height:150px; the text-align:Center; + Border:1px solid #333; - Border-top:None; $ Border-bottom-left-radius:10px; $ Border-bottom-right-radius:10px; - background:#fff; -} the #music: Target, #fun: Target, #photo: Target{ - Z-index:1; Have toWuyi};

In addition to the above code must be set: Target is index:1, and the target element of the Position:absolute, the other is the basic style

The display effect is:

The above is the process of Target making tab tab

By novice small white record

: Target pseudo-Class make Tab tab