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模块，该模块定义了演⽰效果功能。
css 属性选择器
      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被禁⽤选择器，通常使⽤在选择⼀些被选⽤和被禁⽤的的场所

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。