標籤：style class blog code java http
(1).連結偽類使用
a:link {color:pink;} -----未點擊的連結
a:visited{color:skyblue;}-----已經點擊的連結
a:hover{color:red;}-----滑鼠移上去的顏色變化
a:active{color:black;}----選定的連結的顏色變化
Tips:
在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效
在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效。
偽類名稱對大小寫不敏感。
(2):first-child偽類使用：像元素的第一個子類添加其效果
li:first-child{font-wight:bold;}
(3)table中的偽類使用（:nth-of-type/:nth-child/:nth-last-child）
:nth-of-type可以通過參數來選擇表格的奇數行或偶數行，odd代表奇數行，even代表偶數行。
比如:
table tr:nth-of-type(odd){background-color:pink;}------表格的偶數行為粉紅色
table tr:nth-of-typ(even){background-color:red;}-------表格的基數行為紅色
table tr:nth-child(n+i){color:pink;}----從表格的第i行下面的字型為粉紅色
(4):before偽類使用
p:before{content:url(/work/test.jpg)} ----在P標籤前增加一個圖片
(5):after偽類的使用
p:after{content:url(/work/test01.jpg)}------在P標籤的後面增加一個圖片
做了個小小的實驗，css初學者，獻醜下；
1 <!DOCTYPE html> 2 <html> 3 <head> 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;} 10 .mod{ display:inline-block; text-align:left; min-width:9em;} 11 .mod li:first-child { 12 color: red; 13 font: 50px; 14 } 15 16 #box{ 17 margin-top: 0px; 18 height: 50px; 19 width: 100px; 20 background-color: skyblue; 21 border-radius: 20%; 22 } 23 #box:active{ 24 background-color: red; 25 margin-top:20px; //往下跳20px 26 } 27 .yuan{ 28 height: 100px; 29 width: 100px; 30 border-radius: 50%; 31 background-color: pink; 32 text-align: center; 33 display: inline-block; 34 position: relative; 35 } 36 .all .yuan:hover::before{ 37 content: ""; 38 color: #5cb34e; 39 position: absolute; 40 left: 30px; 41 width: 110px; 42 height: 110px; 43 border-radius: 50%; 44 border: 1px dashed green; 45 top:20px; 46 } 47 .all .yuan:hover{ //滑鼠移上去div的顏色變成紅色 48 background-color:red; 49 } 50 </style> 51 </head> 52 <body> 53 54 <table> 55 <tbody></tbody> 56 <tr> 57 <td> 58 <div class="mod"> 59 <h3 class="hd">工作</h3> 60 <ul class="bd"> 61 <li>找bug</li> 62 <li>測試</li> 63 <li>coding</li> 64 </ul> 65 </div> 66 </td> 67 68 <td> 69 <div class="mod"> 70 <h3 class="hd">學習</h3> 71 <ul class="bd"> 72 <li>css </li> 73 <li>js</li> 74 <li>java</li> 75 </ul> 76 </div> 77 </td> 78 79 <td> 80 <div class="mod"> 81 <h3 class="hd">玩play</h3> 82 <ul class="bd"> 83 <li>玩遊戲</li> 84 <li>看電視</li> 85 <li>去青島</li> 86 </ul> 87 </div> 88 </td> 89 </tr> 90 </table> 91 92 <div id="box"></div> 93 <div class="all"> 94 <div class="yuan">shiping</div> 95 <div class="yuan">shiping01</div> 96 <div class="yuan">shiping02</div> 97 <div class="yuan">shiping03</div> 98 </div> 99 </body>100 </html>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
