css3属性符号选择器:

nbsp;html>                    [id*=div]{            color:red;/*id包含div的*/        }        [id^=div]{            color:#0000ff;/*id首字符为div的*/        }        [id$=div]{            color:green;/*id结束符为div的,数字前加上*/        }    
测试文字
测试文字
测试文字
测试文字

登录后复制

css3结构性伪类选择器root、not、empty、target:

nbsp;html>                    /*root选择器指html最外层根元素html*/        :root{            background: gray;        }        /*如果使用了root，body只对有内容的区域修饰*/        body{            background: green;        }        /*not排除功能*/        div *:not(h1){            color:#fff000;        }        /*empty对空的内容修饰*/        :empty{            background: royalblue;        }        /*target对超链接跳转之后内容修饰*/        :target{            background: rebeccapurple;            color:#fff;        }    
文字内容    
标题
    
测试文字
    
测试文字2

登录后复制            单元1        单元2                        单元2                单元1            
链接1链接2链接3            

链接一

内容一

链接二

内容二

立即学习“前端免费学习笔记（深入）”；

链接三

内容三

css3结构性伪类选择器first-line、first-letter、before、after:

nbsp;html>                    /*first-line:第一行*/        p:first-line{            color:#ff0000;        }        /*first-letter:首字符*/        p:first-letter{            color:#0000ff;        }        /*before:之前*/        li:before{            content: "--";            color:#ff0000;        }        /*after:之后*/        li:after{            content: "这是注释";            color:gray;            font-size: 10px;        }    
这是一段测试文字
这是第二段测试文字
    
        
test1
        
test2
        
test3
        
test4
    

登录后复制

css3结构性伪类选择器first-child、last-child、nth-child()、nth-last-child():

nbsp;html>                    body{            background: #555;        }        /*first-child:第一个子元素*/        li:first-child{            background:#0000ff;        }        /*last-child:最后一个子元素*/        li:last-child{            background: #ff0000;        }        /*nth-child():指定的第几个子元素*/        li:nth-child(3){            background: #fff000;        }        /*nth-last-child():指定的倒数第几个子元素*/        li:nth-last-child(2){            background: #999999;        }        /*even:指定的偶数*/        li:nth-child(even){            color: #00ff00;        }        /*odd:指定的奇数*/        li:nth-last-child(odd){            color:#fff;        }    
    
        
这是第1列
        
这是第2列
        
这是第3列
        
这是第4列
        
这是第5列
    

登录后复制

css3结构性伪类选择器nth-child(n)及only-child:

nbsp;html>                    /*nth-child(n)        n=αn+β*/        li:nth-child(4n+1){            background: #0000ff;        }        li:nth-child(4n+2){            background: #00ff00;        }        li:nth-child(4n+3){            background: #999999;        }        li:nth-child(4n){            background: #ff0000;        }        /*only-child:对标签内仅有的一个子元素做修饰*/        li:only-child{            background: #000;            color: #fff;        }    

登录后复制    这是一段测试文字    列表1    列表2    列表3    列表4    列表1    列表2    列表3    列表4    列表1    列表2    列表3    列表4    列表1    列表2    列表3    列表4    列表1    列表2    列表3    列表4

css3结构性伪类选择器nth-of-type、nth-last-of-type:

nbsp;html>                    /*nth-of-type:同类元素做修饰*/        h2:nth-of-type(odd){            background: #fff000;        }        /*nth-last-of-type:同类元素倒数做修饰*/        h2:nth-last-of-type(odd){            background: #0000ff;        }    
    
标题
    
文本内容
    
标题
    
文本内容
    
标题
    
文本内容
    
标题
    
文本内容

登录后复制

css3选择器hover、focus、active、checked:

nbsp;html>                    input[type="text"]:hover{            background: #fff000;        }        input[placeholder=""]:focus{            background: #ff0000;        }        input[type="text"]:active{            background: #0000ff;        }        input[type="checkbox"]:checked{            outline:2px solid #00ff00;        }    音乐听歌

登录后复制

css3选择器enabled、disabled:

nbsp;html>                    /*enabled:可输入状态*/        input[type="text"]:enabled{            background: #fff000;        }        /*disabled:不可输入状态*/        input[type="text"]:disabled{            background:gray;        }        function radio_change() {        var radio1=document.getElementById("radio1");        var radio2=document.getElementById("radio2");        var text=document.getElementById("text");        if(radio1.checked){            text.disabled="";        }else{            text.value="";            text.disabled="disabled";        }    }可用不可用

登录后复制

css3通用兄弟元素选择器:

nbsp;html>                    /*对div的同级元素p修饰*/        div~p{            background: #fff000;        }    
    
        
我是div的子元素p
        
我是div的子元素p
    
    
我是和div同级别p元素
    
我是和div同级别p元素

登录后复制

以上就是css3选择器的说明的详细内容，更多请关注【创想鸟】其它相关文章！