CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]
来源:互联网 发布:宇众网络 编辑:程序博客网 时间:2024/06/14 09:05
在CSS3中新增了 [attribute*=value] 、[attribute^=value] 和[attribute$=value] 三个选择器,使得属性选择器有了通配符的概念。
下边是一个使用这三个属性的完整示例代码,及运行后的页面展示效果:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> [id *= irs] { background-color: red; } [id ^= sec] { background-color: blue; } [id $= ird] { background-color: green; } </style></head><body> <div id="first">第一个 div 元素。(*= 部分匹配)</div> <div id="second">第二个 div 元素。(^= 开头匹配)</div> <div id="third">第三个 div 元素。($= 结尾匹配)</div></body></html>
浏览器中运行效果展示:
下边以这个例子说明CSS3属性选择器。
1. 部分匹配:[attribute*=value] 属性选择器
[attribute *= value] 属性选择器含义是:选择attribute属性中含有value字符串的HTML元素。
上边例子中[id *= irs],attribute就是id,value就是irs,这样就是要选择id属性中含有“irs”字符串的元素,即第一个div元素,并将这个元素的背景色设置为红色。
2.开头匹配: [attribute^=value] 属性选择器
[attribute ^= value] 属性选择器含义是:选择attribute属性中以value字符串开头的HTML元素。
上边例子中[id ^= sec],attribute就是id,value就是sec,这样就是要选择id属性中以“sec”字符串开头的元素,即第二个div元素,并将这个元素的背景色设置为蓝色。
3. 结尾匹配:[attribute$=value] 属性选择器
[attribute $= value] 属性选择器含义是:选择attribute属性中以value字符串结尾的HTML元素。
上边例子中[id $= ird],attribute就是id,value就是ird,这样就是要选择id属性中以“ird”字符串结尾的元素,即第三个div元素,并将这个元素的背景色设置为绿色。
0 0
- CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]
- 【jQuery】[attribute=value]属性选择器
- 【jQuery】[attribute!=value]属性选择器
- 【jQuery】[attribute*=value]属性选择器
- 【JQuery】[attribute=value]属性选择器
- 【JQuery】[attribute*=value]属性选择器
- 3-7[attribute=value]属性选择器
- 3-7[attribute=value]属性选择器
- 3-8[attribute!=value]属性选择器
- css属性选择器中[attribute~=value] 和 [attribute*=value]的区别
- 56. Attribute value 属性
- JQuery选择器之[attribute^=value]使用注意事项
- <portal-fmt:user attribute="value"/>
- Manifest merger failed : Attribute application@label value=(@string/app_name)
- magento, 根据attribute code获取attribute value
- HTML 对象属性 property value 与 attribute value
- Attribute meta-data#android.support.VERSION@value value=(25.3.1) from [com.android.support:appcompat
- Manifest merger failed : Attribute meta-data#android.support.VERSION@value value=(25.3.1) from
- HDU ACM 5256 序列变换
- centos 7 配置iptables开放80端口
- 实现记录用户名和密码
- 实现登陆页面记住密码功能
- epoll+时间堆定时器
- CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]
- Linux正则表达式-重复出现的字符
- Oracle基本操作命令
- [iOS学习]设置iPhone5 5s6背景图
- DeltasFeatureExtractor API 及特征提取
- android滑动菜单demo
- C#中用后台代码实现向XML文档中追加内容
- Linux下常见压缩解压命令
- linux命令详解——tar