html5-css选择器

/*/**{color: red}
p{color: green}
#div1{background: blue;padding-top: 15px;}
.kk{background: blue;border: 5px red solid}
h3.kk{background: green}*/

/*input[value]{background: green}
input[value][style]{background:blue}
input[value='vip1']{background: red}
input[style~='10px']{background: gray}
input[value^='vip']{background:green}
a[href^="http"]{color: red}
a[href$=".cn"]{color: green}
input[value*="vip"]{background: red}
ul li{border: 1px red solid}
ol li{border: 2px green solid}
div p{color: red}
ul >li{border: 1px red solid}
h2+p{color: green}
h2~p{color: red}
div,ul{color: red}
p::first-letter{font-size: 50px;}
p::first-line{color: green}
a::before{
    content: "点击"
}
a::after{
    content: "行吗"
}
a::after{
    content: url(../pic/1.png);
}
p::selection{color: red}
p::selection{background: red}
:root{color: red}
li:first-child{color: red}
ul>li:first-child{color: red}
ul>li:last-child{color: red}
li:last-child{color: red}
li:only-child{color: blue}
p:only-of-type{color: red}
h3:nth-child(2){color: red}
#div1>h3:nth-child(2){color: red}
tr:nth-child(even){background: red}
tr:nth-child(odd){background: green}
tr:nth-child(3n+1){background: green}
tr:nth-last-child(3){background: red}
p:first-of-type{color: red}
p:last-of-type{color: red}
p:nth-of-type(2){color: red}
p:nth-last-of-type(2){color: red}
div:empty{width: 300px;height: 200px;background: green;}
a:link{color: red}
a:active{background: red}
a:hover{background: blue}
a:visited{color: gray}
input:focus{background: red}
input:checked{width: 60px;height: 60px;}
input:enabled{background: red}
input:disabled{background: green}
a:target{color: red}*/
:not(input){color: green}

posted @ 2017-09-19 19:34  侯伟东  阅读(182)  评论(0编辑  收藏  举报