CSS常用的伪类选择器

动态的伪类选择器

:link——没有点击时

        a:link{
            color: #0000ff;
        }

:active——点击的那一刹那的

        a:active{
            color: #ff0000;
        }

:visited——已经点击过的

        a:visited{
            color: #00ff00;           
        }

:hover——鼠标移上去触发
下面这个是鼠标移上去放大的效果

.box{
    width: 50%;
    height: 100px;
    
    background-color: #f00;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    
}
.box:hover{
    transform: scale(1.1);
    cursor: pointer;
}

UI元素状态伪类选择器

:enabled——可用的时候触发

        input:enabled{
            border: none;
        }

:disabled——不可用的时候触发

        input:disabled{
            background-color: #ff0000;
        }

结构伪类选择器

：first-child——结构的第一个子元素

        div:first-child{
            color: #000;
        }

:last-child——结构的最后一个子元素

        div:last-child{
            color: #00ff00
        }

:nth-child(1)——这个不像是数组中的index从0开始的他是从1开始的并且可以是任意的位置包括第一个和最后一个
下面的是奇数修改颜色

        div:nth-child(2n+1){
            color: #0000ff
        }

这个也是奇数修改

        div:nth-child(odd){
            color: #0000ff
        }

偶数修改

        div:nth-child(even){
            color: #0000ff
        }

从第几个开始修改
（从第二个）

        div:nth-child(n+2){
            color: #0000ff
        }

隔几个修改

        div:nth-child(4n+1){
            color: #0000ff
        }

从后开始修改

        div:nth-last-child(3){
            color: #0000ff
        }