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完全向后兼容，因此不必改变现有的设计，浏览器通常支持CSS3CSS3的发展目前体现在两个方面①模块化的发展②浏览器支持情况CSS3的发展现状启奥-Web前端培训教程①模块化的发展CSS3开始遵循模块化的开发，原因是以前的规范作为一个模块实在是庞大而且比较复杂，所以CSS3把它分解为多个小的模块，这样有助于清理各个模块之间的关系，并且非常灵活最重要的CSS3模块选择器框模型背景和边框文本效果2D/3D转换过渡/动画多栏布局用户界面CSS3的发展现状启奥-Web前端培训教程②浏览器支持情况各个主流浏览器为了能让用户体验CSS3的新特性，都定义了各自的私有属性。虽然它可以避免不同浏览器中解析同一个属性时出现冲突，但也没有解决同一页面在不同浏览器中表现不一致的问题，并且我们需要编写更多CSS代码，造成代码冗余不同浏览器的私有属性开发商前缀浏览器-moz-Firefox-webkit-Chorme和Safari-o-Opera-ms-IECSS3新特性预览启奥-Web前端培训教程与之前的版本相比，CSS3的改进非常大，增加了很多新的特性。之前的很多效果都需借助图片和脚本来实现，现在只需要几行代码就能完成①功能强大的选择器②文字效果③边框④背景⑤色彩模式⑥渐变⑦盒布局和多列布局⑧过渡/动画⑨2D/3D旋转⑩媒体查询增强的选择器功能启奥-Web前端培训教程CSS3选择器启奥-Web前端培训教程在CSS中，选择器是一种模式，用于选择需要添加样式的元素。以下列出的是在CSS3版本中定义的，即：兄弟选择器属性选择器伪类选择器兄弟选择器启奥-Web前端培训教程element1~element2(找到E1后面能匹配E2的兄弟节点)例：#box~.long{background:#FC0;}找到id为box的元素后面class名为long的兄弟节点属性选择器启奥-Web前端培训教程CSS3一共新增了3个属性选择器，这些选择器遵循了惯用的编码规则，选用了^、$和*三个通用的匹配运算符，具有如下意义：^表示匹配起始符$表示匹配结束符*表示匹配任意字符属性选择器启奥-Web前端培训教程[attribute^=value]匹配属性值以指定值开头的每个元素(IE6不支持)[attribute$=value]匹配属性值以指定值结尾的每个元素，与上一属性结果相反[attribute*=value]匹配属性值包含指定值的每个元素1、例如：设置class属性值以“test”开头的所有div元素的背景色div[class^=“test”]{background:#ffff00;}2、例如：设置class属性值以test开头的所有元素的背景色：[class^=test]{background:#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-type{background:#FC0;}p:last-of-type{background:#FC0;}p:only-of-type{background:#FC0;}伪类选择器启奥-Web前端培训教程E:only-child：匹配E元素，而且必须是其父元素的唯一子节点的元素E:nth-child(n)：匹配E元素，而且必须是其父元素的第N个子节点元素E:nth-last-child(n)：匹配E元素，而且必须是其父元素的倒数第N个子节点元素p:only-child{background:#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页面中，根元素就是html/元素E:empty：匹配E元素，而且其内部没有任何子元素（包括文本节点）:root{background:#0C3;}p:empty{background:#60C}伪类选择器启奥-Web前端培训教程UI元素状态伪类E:checked：匹配E元素，且当前处于选中状态E:enabled匹配E元素且当前处于可用状态（大多用在表单元素上）E:disabled：匹配E元素，且当前处于不可用状态input:checked{width:50px;height:50px;}input:enabled{background:#F30}input:disabled{background:#F30}伪类选择器启奥-Web前端培训教程伪元素选择器::selection：匹配E元素中，当前被选中的内容。只能向::selection选择器应用少量CSS属性：color、background、cursor以及outline。IE9+、Opera、GoogleChrome以及Safari中支持::selection选择器。Firefox支持替代的::-moz-selection（火狐支持情况不好）div::selection{color:#ff0000;}div::-moz-selection{color:#ff0000;}其他选择器启奥-Web前端培训教程CSS3增加了两个特殊的伪类选择器：E:target：匹配E元素，而且必须是命名锚点的目标元素。URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(targetelement)，应用于锚点(即，即将要跳转到的位置)E1:not(E2)：匹配非E2元素的每个E1元素:target{background:#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/even){background:#F00;}匹配E元素，而且是与它同类型、同级的兄弟元素中的第奇数/偶数个元素例4：p:nth-last-of-type(xn+y){background:#F00;}匹配E元素，而且是与它同类型、同级的兄弟元素中的第xn+y个元素CSS3应用启奥-Web前端培训教程本章总结：CSS3新增的选择器的使用方法CSS3新增加的模块及开发商前缀的使用