【CSS3】---属性选择器
2015-11-05 00:00
639 查看
在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。
在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:
实例展示:
html代码:
css代码
结果显示:
在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:
实例展示:
html代码:
<a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a>
css代码
a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
结果显示:
相关文章推荐
- 【CSS3】---画几何图
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- 【CSS3】---text-overflow 与 word-wrap
- 【CSS3】---嵌入字体@font-face
- 【CSS3】---only-child选择器+only-of-type选择器
- 【CSS3】---为边框应用图片 border-image
- 【CSS3】---练习制作导航菜单
- 【CSS3】---@font-face
- 【CSS3】---@font-face
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- 【WebKit】---WebKit的CSS扩展(WebKit是私有属性)
- 【CSS3】---学习目录
- 【CSS3】---background-origin background-clip background-size
- 用CSS样式下载器 下载CSS里面的图片路径配对问题
- css选择器权值
- CSS基础(03)
- 详解CSS3渐变(线性和径向)
- CSS margin 属性
- RadioButton和CheckBox自定义样式
- CSS基础(02)