Home > Developer > Web Develop
(1). Link pseudo-Class use
A: link {color:pink;}-----not clicked
A: visited{color:skyblue;} -----already clicked on the link
A: hover{color:red;} -----The color change of the mouse move
a: active{color:black;} ----The color change of the selected link
Tips:
In the CSS definition, a:hover must be placed after A:link and a:visited to be valid
In the CSS definition, a:active must be placed after a:hover to be valid.
The pseudo-class name is not case sensitive.
(2): First-child Pseudo-Class use: Add an effect to the first subclass of an element like
Li: first-child{font-wight:bold;}
(3) Pseudo-class use in table (: Nth-of-type/:nth-child/:nth-last-child)
: Nth-of-type can select odd or even rows of a table with parameters,odd represent odd lines, andeven represent even rows.
Like what:
Table TR: Nth-of-type(odd) {background-color:pink;} The even behavior of------table Pink
Table TR: Nth-of-typ(even) {background-color:red;} Cardinal behavior of-------table red
Table TR: Nth-child (n+i) {color:pink;} ----the font below the line I of the table is pink
(4): Before Pseudo-class use
P: Before {Content:url (/work/test.jpg)}----Add a picture before the P label
(5): Use of after Pseudo-class
P:after {content:url (/work/test01.jpg)}------Add a picture after the P tag
Did a little experiment, CSS beginner, caught dead;
1 <! DOCTYPE html>2 3 4 <title>test</title>5 <meta http-equiv= "Content-type" content= "text/html; charset=utf-8" >6 <style>7 TD{text-align:Center;width:360px;Background-color:LightBlue;Border:1px solid Blue;}8 H3{Background-color:Pink;}9 ul{Background-color:#DDD;}Ten . MoD{Display:Inline-block;text-align: Left;Min-width:9em;} One . MoD Li:first-child{ A Color:Red; - Font:50px; -} the - #box{ - Margin-top:0px; - Height:50px; + width:100px; - Background-color:Skyblue; + Border-radius:20%; A} at #box: Active{ - Background-color:Red; - Margin-top:20px;//Jump down 20px -} - . Yuan{ - Height:100px; in width:100px; - Border-radius:50%; to Background-color:Pink; + text-align:Center; - Display:Inline-block; the position:relative; *} $ . All. Yuan:hover::before{Panax Notoginseng content: ""; - Color:#5cb34e; the position:Absolute; + Left:30px; A width:110px; the Height:110px; + Border-radius:50%; - Border:1px dashed Green; $ Top:20px; $} - . All. Yuan:hover{//mouse over div color turns red - Background-color:Red; the} - </style>Wuyi the <body> - Wu <table> - <tbody></tbody> About <tr> $ <td> - <div class= "mod" > - - <ul class= "BD" > A <li> Find bug</li> + <li> Testing </li> the <li>coding</li> - </ul> $ </div> the </td> the the <td> the <div class= "mod" > -
in <ul class= "BD" > the <li>css </li> the <li>js</li> About <li>java</li> the </ul> the </div> the </td> + - <td> the <div class= "mod" >Bayi
the <ul class= "BD" > the <li> play Games </li> - <li> watch TV </li> - <li> go to Qingdao </li> the </ul> the </div> the </td> the </tr> - </table> the the <div id= "box" ></div> the <div class= "All" >94 <div class= "Yuan" >shiping</div> the <div class= "Yuan" >shiping01</div> the <div class= "Yuan" >shiping02</div> the <div class= "Yuan" >shiping03</div>98 </div> About </body> -
View Code
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
