CSS伪类，状态伪类和结构性伪类

发布于：2022-07-11 13:23:17  栏目：技术文档

/ 状态伪类:当选择得目标对象状态发生改变后,进行什么样的样式设置 /

    .list > li.first{
        color: blueviolet;
    }
    .list > li:nth-of-type(1){
        color: brown;
    }
    .list > li:nth-of-type(5){
        color: brown;
    }
    /* 
    :nth-of-type(an+b)
    1 a：系数，[0,1,2,3...]
    2 n：参数，[0,1,2,3...]
    3 b：偏移量，从0开始 
    */
    /* 匹配一个 */
    /* 0*n+5 */
    .list > li:nth-of-type(5){
        color: brown;
    }
    /* 匹配一组 */
    .list > li:nth-of-type(1n+3){
        background-color: blueviolet;
    }
    .list > li:nth-of-type(-1n+3){
        background-color: blue;
    }
    .list > li:nth-of-type(2n){
        background-color: green;
    }
    /* 前3个 */
    .list > li:nth-of-type(-n+3){
        background-color: aquamarine;
    }
    /* 后3个 */
    .list > li:nth-last-of-type(-n+3){
        background-color: antiquewhite;
    }
    /* 第一个 */
    .list > li:first-of-type{
    }
    /* 最后一个 */
    .list > li:last-of-type{
    }
    /* 奇偶 even:偶数 */
    .list > li:nth-of-type(even){
        background-color: red;
    }
    /* 奇偶 odd:偶数 */
    .list > li:nth-of-type(odd){
        background-color: green;
    }
    /* 结构性伪类:选择子元素去使用的 */
    /* 设置被禁用元素样式 */
    input:disabled{
        color: blue;
    }
    button:hover{
        background-color: blue;
    }
    input.a +{
        background-color: blue;
    }
    input:focus{
        background-color: blue;
    }

相关推荐