CSS3属性选择器

说明:CSS3特性有兼容性问题,ie9+才支持。移动端支持优于PC端。

属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助类或id选择器!

语法:

选择器[] {
         color: red;
}

举例:

input[value] {
         color: red;
}

意思是必须属于input,input必须包含value属性的,才会把它选出来!

属性选择器还可以选择属性=值的某些元素,举例:

input[type=text] {
         color: red;
}

意思是必须属于input,type的属性值必须为text属性的,才会把它选出来!

属性选择器还可以选择属性=以什么值开头的某些元素,举例:

div[class^=icon] {
         color: red;
}

意思是必须属于div,class的属性值必须以icon开头的,才会把它选出来!

属性选择器还可以选择属性=以什么值结尾的某些元素,举例:

div[class$=icon] {
         color: red;
}

意思是必须属于div,class的属性值必须以icon结尾的,才会把它选出来!

属性选择器还可以选择属性=包含什么值的某些元素,举例:

div[class*=icon] {
         color: red;
}

意思是必须属于div,class的属性值只要包含icon(不论开头还是结尾)的,都会把它选出来!

注意:类选择器、属性选择器、伪类选择器,权重均为10!

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信