05-僞類選擇器

僞類選擇器通常會用在超連接a標籤中，使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則"  LoVe HAte

 1               /*沒有被訪問的a標籤的樣式*/
 2         .box ul li.item1 a:link{
 3             
 4             color: #666;
 5         }
 6         /*訪問事後的a標籤的樣式*/
 7         .box ul li.item2 a:visited{
 8             
 9             color: yellow;
10         }
11         /*鼠標懸停時a標籤的樣式*/
12         .box ul li.item3 a:hover{
13             
14             color: green;
15         }
16         /*鼠標摁住的時候a標籤的樣式*/
17         .box ul li.item4 a:active{
18             
19             color: yellowgreen;
20         }

View Code

 

再給你們介紹一種css3的選擇器nth-child()

              /*選中第一個元素*/
        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表示選中全部,這裏面必須是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;
        }
        /*隔幾換色  隔行換色
             隔4換色 就是5n+1,隔3換色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }
            

View Code