CSS3 互动版

新增属性选择器
简介 匹配属性值——开始值 匹配属性值——包含值 匹配属性值——结尾值
新增结构伪类选择器
简介 选择首个子元素 选择末尾子元素 选择首个类型子元素 选择末尾类型子元素 选择一或多个子元素 选择类型子元素(倒序) 选择指定类型元素 选择父元素的特定子元素(倒序) 选择有唯一子元素的元素 选择元素的子元素并类型是唯一的子元素 选择内容为空的元素
CSS3 圆角边框
简介 border-radius属性 border-radius中指定两个半径 不显示边框 修改边框种类 绘制四个角不同半径的圆角边框 CSS3 圆角边框练习
CSS3 图像边框
简介 border-image属性 border-image属性最简单的使用方法 使用border-image属性来指定边框宽度 中央图像自动拉伸 指定四条边中图像的显示方法 使用背景图像
CSS3 背景
简介 background-size 属性(调整图片大小) background-size 属性(背景图片拉伸) background-origin 属性 多重背景图片 background-clip 属性 新的背景属性
CSS3 文本效果
简介 text-shadow属性使用方法 位移距离 阴影的模糊半径 阴影的颜色 指定多个阴影 自动换行
CSS3 字体
使用您需要的字体 使用粗体文本 CSS3 字体描述符
CSS3 2D 转换
简介 2D 转换 translate() 方法 rotate() 方法 scale() 方法 skew() 方法 matrix() 方法 新的转换属性 2D Transform 方法
CSS3 3D 转换
简介 如何工作与浏览器支持 rotateX() 方法 rotateY() 旋转 转换属性 2D Transform 方法
CSS3 过渡
简介 如何工作 多项改变 过渡属性 使用了简写的 transition 属性
CSS3 动画
简介 实例 CSS3 动画 什么是 CSS3 中的动画? 实例改变背景色和位置 CSS3 动画属性 包含所有动画属性实例 使用了简写的动画 animation 属性
CSS3 多列
简介 CSS3 创建多列 CSS3 规定列之间的间隔 CSS3 列规则 新的多列属性
CSS3 用户界面
简介 CSS3 Resizing CSS3 Box Sizing CSS3 Outline Offset 新的用户界面属性

##介绍

  属性选择器早在CSS2中就被引入了,其主要作用就是为带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。

  在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。

CSS3的属性选择器主要包括以下几种:

  1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;

  2. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;

  3. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;