扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了CSS3如何使用属性选择器完成JavaScript的工作，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联是一家专注于网站设计、成都网站建设与策划设计,镇原网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:镇原等地区。镇原做网站价格咨询:13518219792
CSS3除了引入动画、滤镜（用于特效）以及新的布局技术外，在选择器（selector）方面也有增强。在以前只能用JavaScript来完成的工作，通过CSS的这些技术也可以来完成。
属性选择器根据元素的属性（attributes）来匹配。这可以是一个单独的属性，比如[type]，或者可以是一个属性和取值的组合，比如[type=checkbox]或 [for="email"]。
我们也可以用属性选择器来匹配属性存在与否以及子字符串。例如，我们可以在空格分隔开的列表中匹配属性值，或者我们可以匹配以字符串tel:开始的属性值。我们甚至可以匹配带连字符的属性值如en-US。其中连字符匹配和空格分隔属性值列表匹配早在CSS2中已有定义。
CSS3的增强在于添加了部分（partial）匹配规则。本篇将着重介绍新引入的属性选择器（Attribute selectors）使用方法。
1.部分匹配
使用全属性值来匹配是很常用的方法，不过在CSS3中我们可以使用部分匹配，语法格式是：
[att~=val]
这里att代表属性，val代表空格分隔开来的属性值列表中的某一个值。波浪线~表示部分匹配的语义。
比如：
2.子字符串匹配
我们还可以通过子字符串来匹配属性值，有点类似于正则表达式：
^=： 从头部匹配
$=： 从尾部匹配
*=： 包含某子字符串
比如下面的html代码：
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3如何使用属性选择器完成JavaScript的工作”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网