[分享]css3属性选择器教学

CSS3属性选择器对于前端开发人员来说是非常重要的一部分，它可以让我们快速选择符合某些特定属性的HTML元素，并且为它们添加特定的样式。/使用属性选择器/ a{ color: blue; } /利用部...

CSS3属性选择器对于前端开发人员来说是非常重要的一部分，它可以让我们快速选择符合某些特定属性的HTML元素，并且为它们添加特定的样式。

/*使用属性选择器*/
a[target="_blank"]{
    color: blue;
}

/*利用部分匹配*/
input[type^="button"]{
    background-color: green;
}

/*利用全部匹配*/
input[type$="password"]{
    border: 1px solid red;
}

/*利用中间匹配*/
input[type*="email"]{
    background-color: yellow;
} 

CSS3的属性选择器主要有四种，分别是等值选择器、部分匹配选择器、全部匹配选择器和中间匹配选择器。

等值选择器是最常用的选择器，它可以根据属性值的完全匹配来选择元素，上面的例子就是如此。在例子中，我们为所有带有target="_blank"属性的链接元素设置了蓝色字体颜色。

部分匹配选择器可以根据属性值的前缀匹配来选择元素，上面的例子就是以"button"为前缀选择了所有的按钮元素，并将它们的背景色改为了绿色。

全部匹配选择器可以根据属性值的后缀匹配来选择元素，上面的例子就是以"password"为后缀选择了所有密码框元素，并将它们的边框颜色改为了红色。

中间匹配选择器则可以根据属性值中包含的某个字符串来选择元素，上面的例子就是以"email"为中间匹配来选择了所有邮箱输入框元素，将它们的背景色改为了黄色。

细心的读者可能已经发现，属性选择器的格式是由方括号"[ ]"和“=”或“^=”或“$=”或“*=”等符号来完成，这些符号的使用方式也非常简单。

相信大家掌握了CSS3属性选择器的使用方法后，再手写或者调试CSS样式表的时候就会得心应手了。