CSS3简介及强大的选择器

1、启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程功能强大的选择器文本、字体效果边框、背景、色彩模式、渐变可伸缩布局、多列布局、用户界面过渡、动画、2D/3D旋转媒体查询总体课程导航第1章CSS3简介及强大的选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程本章节授课目标启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 了解CSS3的发展方向及新特性n 掌握CSS3增强的选择器功能CSS3简介启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训

2、 教 程CSS3简介启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n CSS即层叠样式表（Cascading Stylesheet）。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同的页面的外观和格式n CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模

3、块 、背景和边框 、文字特效 、多栏布局等CSS3的发展现状启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 毋庸置疑，CSS3是WEB样式设计的未来，CSS3规范尚处于完善之中，因此浏览器的支持程度各有不同。为了让用户能够体验到CSS3的好处，各主浏览器都定义了自己的私有属性n CSS3 完全向后兼容，因此不必改变现有的设计，浏览器通常支持 CSS3n CSS3的发展目前体现在两个方面 模块化的发展 浏览器支持情况CSS3的发展现状启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程 模块化的发展 CSS3开始遵循

4、模块化的开发，原因是以前的规范作为一个模块实在是庞大而且比较复杂，所以CSS3把它分解为多个小的模块，这样有助于清理各个模块之间的关系，并且非常灵活最重要的CSS3模块选择器框模型背景和边框文本效果2D/3D 转换过渡/动画多栏布局用户界面CSS3的发展现状启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程 浏览器支持情况 各个主流浏览器为了能让用户体验CSS3的新特性，都定义了各自的私有属性。虽然它可以避免不同浏览器中解析同一个属性时出现冲突，但也没有解决同一页面在不同浏览器中表现不一致的问题，并且我们需要编写更多CSS代码，造成代码冗余不同浏览器的私有

5、属性开发商前缀浏览器-moz-Firefox-webkit-Chorme和Safari-o-Opera-ms-IECSS3新特性预览启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 与之前的版本相比，CSS3的改进非常大，增加了很多新的特性。之前的很多效果都需借助图片和脚本来实现，现在只需要几行代码就能完成 功能强大的选择器 文字效果 边框 背景 色彩模式 渐变 盒布局和多列布局 过渡/动画 2D/3D旋转 媒体查询增强的选择器功能启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程CSS3选择器启 奥启 奥 - W

6、 e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。以下列出的是在CSS3 版本中定义的，即： 兄弟选择器 属性选择器 伪类选择器兄弟选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n element1element2(找到E1后面能匹配E2的兄弟节点)例：#box.long background:#FC0; 找到id为box的元素后面class名为long的兄弟节点属性选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n

7、CSS3一共新增了3个属性选择器，这些选择器遵循了惯用的编码规则，选用了、$和*三个通用的匹配运算符，具有如下意义： 表示匹配起始符 $表示匹配结束符 *表示匹配任意字符属性选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n attribute=value匹配属性值以指定值开头的每个元素(IE6不支持)n attribute$=value匹配属性值以指定值结尾的每个元素，与上一属性结果相反n attribute*=value 匹配属性值包含指定值的每个元素1、例如：设置 class 属性值以 “test” 开头的所有 div 元素的背景色 divc

8、lass=“test”background:#ffff00;2、例如：设置 class 属性值以 test 开头的所有元素的背景色： class=test background:#ffff00;伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 伪类选择器分成三大类： 结构伪类：可以通过文档结构的相互关系来匹配特定的元素，对于有规律的文档结构，可以减少class和id的定义，使得文档结构更加清晰 UI元素状态伪类：可以设置元素处于某种状态下的样式。在人机交互过程中，只要元素状态发生变化，选择符就有可能会匹配成功 伪元素：并不针对真正的元素使用该

9、选择符，而是针对CSS已经定义好的伪元素使用伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 结构伪类： 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:#

10、FC0;p:last-of-typebackground:#FC0;p:only-of-typebackground:#FC0;伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程 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:

11、nth-last-child(2)background:#FC0;伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程 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;伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训

12、教 程 E:root：匹配文档根元素。所谓根元素就是就是位于文档结构中的顶层元素，在HTML页面中，根元素就是元素 E:empty：匹配E元素，而且其内部没有任何子元素（包括文本节点）:rootbackground:#0C3;p:emptybackground:#60C伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n UI元素状态伪类 E:checked：匹配E元素，且当前处于选中状态 E:enabled 匹配E元素且当前处于可用状态（大多用在表单元素上） E:disabled：匹配E元素，且当前处于不可用状态input:checkedwid

13、th:50px; height:50px;input:enabled background:#F30input:disabled background:#F30伪类选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 伪元素选择器 :selection：匹配E元素中，当前被选中的内容。只能向 :selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。IE9+、Opera、Google Chrome 以及 Safari 中支持 :selection 选择器。Firefox 支持替代的 :-

14、moz-selection（火狐支持情况不好）div : selectioncolor:#ff0000;div : -moz-selectioncolor:#ff0000;其他选择器启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n CSS3增加了两个特殊的伪类选择器： E:target：匹配E元素，而且必须是命名锚点的目标元素。URL带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，应用于锚点(即，即将要跳转到的位置) E1:not(E2)：匹配非E2元素的每个E1元素:targetback

15、ground:#F00;:not(p)background:#F00;备注：选择器的其他用法启 奥启 奥 - W e b- W e b 前 端 培 训 教 程前 端 培 训 教 程n 对于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: