05-伪类选择器

Posted 2020-12-29 liuye1990

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  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;
        }

再给大家介绍一种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;
        }