最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3中属性选择器使用方法详解
时间：2022-06-25 13:44:04 编辑：袖梨 来源：一聚教程网
注释：
一、属性选择器除了IE6不支持外，其他的浏览器都能支持。
二、E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。
CSS3中新增了许多选择器，今天零度给大家说说CSS3的属性选择器。
与CSS2相比，CSS3新增了3种属性选择器：[attr^=value]、[attr$=value]、[attr*=value]；分别来讲解一下。
一、[attr^=value]属性选择器
大家如果接触过正则表达式的话，应该知道^符号的意思，是表示开头，没错，这里也是表示开头的意思，意思就是选择属性名attr的开头值为value的元素！
举个例子：
| 代码如下 | 复制代码 |
|
我的class是teacher 我的class是tea 我的class是teach 我的class是aaa 这样会选择前三个元素，而不会选择最后一个元素。 |
|
二、[attr$=value]属性选择器
相比较前一个，这一个就很容易理解了，$符号就代表结尾，这里意思是选择属性名attr的结尾值为value的元素！
例子：
| 代码如下 | 复制代码 |
|
我的class是teacher 我的class是tea 我的class是teach 我的class是aaa
|
|
这样就会选择class为teacher的div。
三、[attr*=value]属性选择器
最后这一个和前面两个的区别是符号换成了*，这个代表通配符的意思，意思是选择属性名attr的值包含value的元素！
| 代码如下 | 复制代码 |
|
我的class是teacher 我的class是tea 我的class是teach 我的class是aaa
|
|
这样就会选择class为teacher和class为teach的两个div。
这三种属性选择器大家如果用的熟练的话会对提高工作效率有很大帮助。
相关文章
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21
- 《潜行者2：切尔诺贝利之心》使用手电筒方法介绍 11-21