CSS3简介及强大的选择器

启奥-Web前端培训教程,CSS3,功能强大的选择器文本、字体效果边框、背景、色彩模式、渐变可伸缩布局、多列布局、用户界面过渡、动画、2D/3D旋转媒体查询,总体课程导航,第1章CSS3简介及强大的选择器,启奥-Web前端培训教程,本章节授课目标,启奥-Web前端培训教程,了解CSS3的发展方向及新特性掌握CSS3增强的选择器功能,CSS3简介,启奥-Web前端培训教程,CSS3简介,启奥-Web前端培训教程,CSS即层叠样式表（CascadingStylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同的页面的外观和格式CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等,CSS3的发展现状,启奥-Web前端培训教程,毋庸置疑，CSS3是WEB样式设计的未来，CSS3规范尚处于完善之中，因此浏览器的支持程度各有不同。为了让用户能够体验到CSS3的好处，各主浏览器都定义了自己的私有属性CSS3完全向后兼容，因此不必改变现有的设计，浏览器通常支持CSS3CSS3的发展目前体现在两个方面模块化的发展浏览器支持情况,CSS3的发展现状,启奥-Web前端培训教程,模块化的发展CSS3开始遵循模块化的开发，原因是以前的规范作为一个模块实在是庞大而且比较复杂，所以CSS3把它分解为多个小的模块，这样有助于清理各个模块之间的关系，并且非常灵活,CSS3的发展现状,启奥-Web前端培训教程,浏览器支持情况各个主流浏览器为了能让用户体验CSS3的新特性，都定义了各自的私有属性。虽然它可以避免不同浏览器中解析同一个属性时出现冲突，但也没有解决同一页面在不同浏览器中表现不一致的问题，并且我们需要编写更多CSS代码，造成代码冗余,CSS3新特性预览,启奥-Web前端培训教程,与之前的版本相比，CSS3的改进非常大，增加了很多新的特性。之前的很多效果都需借助图片和脚本来实现，现在只需要几行代码就能完成,功能强大的选择器文字效果边框背景色彩模式,渐变盒布局和多列布局过渡/动画2D/3D旋转媒体查询,增强的选择器功能,启奥-Web前端培训教程,CSS3选择器,启奥-Web前端培训教程,在CSS中，选择器是一种模式，用于选择需要添加样式的元素。以下列出的是在CSS3版本中定义的，即：兄弟选择器属性选择器伪类选择器,兄弟选择器,启奥-Web前端培训教程,element1element2(找到E1后面能匹配E2的兄弟节点),例：#box.longbackground:#FC0;找到id为box的元素后面class名为long的兄弟节点,属性选择器,启奥-Web前端培训教程,CSS3一共新增了3个属性选择器，这些选择器遵循了惯用的编码规则，选用了、$和*三个通用的匹配运算符，具有如下意义：表示匹配起始符$表示匹配结束符*表示匹配任意字符,属性选择器,启奥-Web前端培训教程,attribute=value匹配属性值以指定值开头的每个元素(IE6不支持)attribute$=value匹配属性值以指定值结尾的每个元素，与上一属性结果相反attribute*=value匹配属性值包含指定值的每个元素,1、例如：设置class属性值以“test”开头的所有div元素的背景色divclass=“test”background:#ffff00;2、例如：设置class属性值以test开头的所有元素的背景色：class=testbackground:#ffff00;,伪类选择器,启奥-Web前端培训教程,伪类选择器分成三大类：结构伪类：可以通过文档结构的相互关系来匹配特定的元素，对于有规律的文档结构，可以减少class和id的定义，使得文档结构更加清晰UI元素状态伪类：可以设置元素处于某种状态下的样式。在人机交互过程中，只要元素状态发生变化，选择符就有可能会匹配成功伪元素：并不针对真正的元素使用该选择符，而是针对CSS已经定义好的伪元素使用,伪类选择器,启奥-Web前端培训教程,结构伪类：E:first-of-type：匹配与E同类型、同级的兄弟元素中的第一个元素E:last-of-type：匹配与E同类型、同级的兄弟元素中的最后一个元素E:only-of-type：匹配与E同类型、同级的兄弟元素中的唯一一个E:last-child：匹配E元素，而且必须是其父元素的最后一个子节点元素E:first-child：匹配E元素，而且必须是其父元素的第一个子节点元素,p:first-of-typebackground:#FC0;,p:last-of-typebackground:#FC0;,p:only-of-typebackground:#FC0;,伪类选择器,启奥-Web前端培训教程,E:only-child：匹配E元素，而且必须是其父元素的唯一子节点的元素E:nth-child(n)：匹配E元素，而且必须是其父元素的第N个子节点元素E:nth-last-child(n)：匹配E元素，而且必须是其父元素的倒数第N个子节点元素,p:only-childbackground:#FC0;,p:nth-child(3)background:#FC0;,p:nth-last-child(2)background:#FC0;,伪类选择器,启奥-Web前端培训教程,E:nth-of-type(n)：匹配E元素，而且是与它同类型、同级的兄弟元素中的第N个元素E:nth-last-of-type(n)：匹配E元素，而且是与它同类型、同级的兄弟元素中的倒数第N个元素,p:nth-of-type(3)background:#FC0;,p:nth-last-of-type(3)background:#FC0;,伪类选择器,启奥-Web前端培训教程,E:root：匹配文档根元素。所谓根元素就是就是位于文档结构中的顶层元素，在HTML页面中，根元素就是元素E:empty：匹配E元素，而且其内部没有任何子元素（包括文本节点）,:rootbackground:#0C3;,p:emptybackground:#60C,伪类选择器,启奥-Web前端培训教程,UI元素状态伪类E:checked：匹配E元素，且当前处于选中状态E:enabled匹配E元素且当前处于可用状态（大多用在表单元素上）E:disabled：匹配E元素，且当前处于不可用状态,input:checkedwidth:50px;height:50px;,input:enabledbackground:#F30,input:disabledbackground:#F30,伪类选择器,启奥-Web前端培训教程,伪元素选择器:selection：匹配E元素中，当前被选中的内容。只能向:selection选择器应用少量CSS属性：color、background、cursor以及outline。IE9+、Opera、GoogleChrome以及Safari中支持:selection选择器。Firefox支持替代的:-moz-selection（火狐支持情况不好）,div:selectioncolor:#ff0000;div:-moz-selectioncolor:#ff0000;,其他选择器,启奥-Web前端培训教程,CSS3增加了两个特殊的伪类选择器：,E:target：匹配E元素，而且必须是命名锚点的目标元素。URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(targetelement)，应用于锚点(即，即将要跳转到的位置)E1:not(E2)：匹配非E2元素的每个E1元素,:targetbackground:#F00;,:not(p)background:#F00;,备注：选择器的其他用法,启奥-Web前端培训教程,对于E:nth-child(n)、E:nth-last-child(n)及E:nth-of-type(n)、E:nth-last-of-type(n)这四个伪类选择器来说，他们的功能不止于此，还支持如下用法：,例1：p:nth-child(odd/even)background:#F00;匹配E元素，而且必须是其父元素的第奇数/偶数个子节点元素,例2：p:nth-child(xn+y)background:#F00;匹配E元素，而且必须是其父元素的第xn+y个子节点元素,例3：p:nth-of-type(odd/