属性选择器

Posted 2020-11-20 f51yuanli

性选择器简介

元素的属性，我们都知道是什么。例如下面代码中type和value就是input元素的属性。

属性选择器，顾名思义，就是通过属性来选择元素的

<input type="text" value="lvye"/>

其实属性选择器在CSS2中已经存在了，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器。对于CSS2中的属性选择器，请关注即将上线的CSS进阶教程。

E[attr^="lvye"]	选取了元素E，其中E元素定义了属性att，att属性值是以lvye开头的任何字符串。
E[attr$="lvye"]	选取了元素E，其中E元素定义了属性att，att属性值是以lvye结尾的任何字符串。
E[attr*="lvye"]	选取了元素E，其中E元素定义了属性att，att属性值任意位置是包含了lvye的任何字符串。

（E，指的是元素名element；attr，指的是属性名attribute）

CSS3新增的这3个属性选择器使得选择器具有通配符的功能，有点正则表达式的感觉

我们在百度文库下载资料的时候，经常会看到文档列表的超链接前面都会显示一个文档类型的小图标。

这是用户体验非常好的设计细节。这个效果的实现技术，只需要使用CSS3中的属性选择器就可以轻松实现了。