CSS3(二)——属性选择器
2016-03-18 09:59
686 查看
在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(一)
- css 未知尺寸元素水平垂直居中(只针对inline,inline-block,table-cells)
- DIV+CSS规范命名大全集合
- CSS笔试题
- HTML中引入CSS样式有几种形式?
- CSS垂直居中
- CSS样式优先级与权重计算方式
- css和html的四种结合方式
- CSS学习(十七)-盒模型
- No.1小白的HTML+CSS心得篇
- DOM-元素的内容、属性、样式
- 实现带样式的表单验证:用户名、密码验证
- css垂直居中的几种方法
- css3总结笔记
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS实现垂直、水平居中方式
- css投影效果
- css实现文字一行居中,多行左对齐
- cssAndHtml
- css3学习--css3动画详解二(3d效果)