CSS3——概述、发展史、模块介绍、与浏览器之间的关系

一、CSS3概述和CSS3的发展史：

1、css3概述：

  CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了， IE10以后也开始全面支持CSS3了。

2、css的发展史：

HTML的诞生 20世纪90年代初
1996年底， CSS第一版诞生
1998年5月 CSS2正式发布
2004年 CSS2.1发布
CSS3的发布 …

二、CSS3模块介绍

1、CSS1 中定义了网页的基本属性：

字体、颜色、补白、基本选择器等

2、CSS2中在CSS1的基础上添加了高级功能

浮动和定位、高级选择器等(子选择器、相邻选择器、通用选择器)

3、CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段。

	           2002年5月15日发布CSS3 Line模块，该模块定义了文本行模型
	　　　　　　2002年11月7日发布CSS3 Lists模块，该模块定义了列表相关样式
	　　　　　　2002年11月7日发布CSS3 Border模块，新增背景边框功能，后被合并到背景模块中
	　　　　　　2003年5月14日发布CSS3 Generated and Replace Content模块，该模块定义CSS3生成及更换内容功能。
	　　　　　　2003年8月13日发布CSS3 Presentation Levels模块，该模块定义了演示效果功能。
	　　　　　　2003年8月13日发布CSS3 Syntax模块，该模块重新定义了CSS语法规则
	　　　　　　2004年2月24日发布CSS3 Hyperlink Presenation模块，该模块中心定义了超链接的表示规则。
	　　　　　　2004年12月6日发布CSS3 Speech模块，该模块定义了’语音’样式规则。
	　　　　　　2005年12月15日发布CSS3 Cascading and inheritance模块，该模块重新定义了CSS层叠和继承规则。
	　　　　　　2007年8月9日发布CSS3 Basic box模块，该模块定义了CSS的基本盒子模型。
	　　　　　　2007年9月5日发布CSS3 Grid Positioning模块，该模块定义了CSS的网格定义规则。
	　　　　　　2009年3月20日发布CSS3 Animations模块，该模块定义了CSS3的动画模型。
	　　　　　　2009年3月20日发布CSS3 3D Transforms模块，该模块定义了CSS3 3D转换模型。
	　　　　　　2009年6月18日发布CSS3 Fonts模块，该模块定义了CSS字体模型。
	　　　　　　2009年7月23日发布CSS3 Image Value模块，该模块定义了图像内容显示模型。
	　　　　　　2009年7月23日发布CSS3 Flexible Box Layout模块，该模块定义了灵活的框布局模块。
	　　　　　　2009年8月4日发布了CSS3 视图模块
	　　　　　　2009年12月1日发布CSS3 Transitions模块，该模块定义了动画过渡效果。
	　　　　　　2009年12月1日发布CSS3 2D Transforms模块，该模块定义了CSS3 2D转换模型。
	　　　　　　2010年4月29日发布CSS3 Template Layout模块，该模块定义了模板布局模型。
	　　　　　　2010年4月29日发布了CSS3 Generated Content For Page Media 模块，该模块定义了分页媒体内容模型。
	　　　　　　2010年10月5日发布CSS3 Text模块，该模块定义了文本模型。
	　　　　　　2010年10月5日发布CSS3 Background and Borders模块，该模块重新定义了边框和背景模型。

三、CSS3与浏览器之间的关系

最需要注意的问题是各个浏览器的兼容性问题
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。
它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性。
虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

四、CSS3选择器

1.CSS3选择器 属性选择器

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr=“value”]：指定属性名，并指定了该属性的属性值；IE6不支持这个选择器
E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；IE6不支持这个选择器
E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的；IE6不支持这个选择器
E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的；IE6不支持这个选择器
E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value；IE6不支持这个选择器
E[attr|=“value”]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;IE6不支持这个选择器

2.CSS3 结构性伪类选择器—root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。

3.CSS3 结构性伪类选择器—not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

4.CSS3 结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

5.CSS3 结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

6.CSS3 结构性伪类选择器—first-child

:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

7.CSS3 结构性伪类选择器—last-child

:last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。

8.CSS3 结构性伪类选择器—nth-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

9.CSS3 only-child选择器

:only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

####10.CSS3选择器 :enabled和:disabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。

:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。要正常使用:disabled选择器，需要在表单元素的HTML中设置“disabled”属性。

11.CSS3选择器 :checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。

12.CSS3选择器 ::selection选择器

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。

13.CSS3选择器 :read-only和read-write选择器

:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。

14.CSS3选择器 ::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。

15.CSS3选择器 :disable和:enable

:disable被启用选择器,和:enable被禁用选择器，通常使用在选择一些被选用和被禁用的的场所