前端-CSS-3-偽類選擇器
阿新 • • 發佈：2018-11-08
/*'愛恨原則' love hate*/ /*沒有被訪問的a標籤的樣式*/ .box ul li.item1 a:link{ color: #666; } /*訪問過後的a標籤的樣式*/ .box ul li.item2 a:visited{ color: yellow; } /*滑鼠懸停時a標籤的樣式*/ .box ul li.item3 a:hover{ color: green; }/*滑鼠點住的時候a標籤的樣式*/ .box ul li.item4 a:active{ color: yellowgreen; } /*選中第一個元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*選中最後一個元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*選中當前指定的元素 數值從1開始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示選中所有 從0開始的 0的時候表示沒有選中*/ div ul li:nth-child(n){ font-size: 40px; color: red; }/*偶數*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇數*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔幾換色 隔行換色*/ div ul li:nth-child(5n+1){ font-size: 50px; color: red; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="#">張三</a> </li> <li class="item2"> 2 <a href="#">李四</a> </li> <li class="item3"> 3 <a href="#">王八</a> </li> <li class="item4"> 4 <a href="#">趙六</a> </li> <li class="item4"> 5 <a href="#">趙六</a> </li> <li class="item4"> 6 <a href="#">趙六</a> </li> <li class="item4"> 7 <a href="#">趙六</a> </li> <li class="item4"> 8 <a href="#">趙六</a> </li> <li class="item4"> 9 <a href="#">趙六</a> </li> <li class="item4"> 10 <a href="#">趙六</a> </li> </ul> </div> </body> </html>