CSS3.0参考手册


Copyright © 2009 Tencent ISD webteam. All Rights Reserved CSS3 Properties Borders Backgrounds Color Text effects User-interface Selectors Basic box model Generated Content Other modules border-color border-image border-radius box-shadow background-origin background-clip background-size multiple backgrounds HSL colors HSLA colors opacity RGBA colors text-shadow text-overflow word-wrap box-sizing resize outline nav-up , nav-right , nav-down , nav-left attribute selectors overflow-x , overflow-y content media queries multi-column layout Web fonts speech Copyright © 2009 Tencent ISD webteam. All Rights Reserved Borders Properties border-color border-image border-radius box-shadow Copyright © 2009 Tencent ISD webteam. All Rights Reserved Border-color 版本:版本:版本:版本:CSS3 继承性:无 border-color : 相相相相关关关关属属属属性性性性 :border-top-color, border-right-color, border-bottom-color , border-left-color 颜色值。 设设设设置置置置对对对对象象象象边边边边框的框的框的框的颜颜颜颜色。色。色。色。 使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽 度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。 语语语语法:法:法:法: 取取取取值值值值:::: :::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto Border-color -moz-border-color             兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (×) Chrome 1.0.x (×) Opera 9.64 (×) Safari 3.1 (×) IE7 (√) Firefox 3.0 (×) Chrome 2.0.x (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: Border-color 复制代码 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Border-image 版本:版本:版本:版本:CSS3 继承性:无 border-image : none | [ | ]{1,4} [ / {1,4} ]? [ stretch | repeat | round ] {0,2} 相相相相关关关关属属属属性性性性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom- right-image 默认值。无背景图。 使用绝对或相对 url 地址指定背景图像。 边框宽度用固定像素值表示。 边框宽度用百分比表示。 拉伸 | 重复 | 平铺 (其中stretch是默认值。)   使用使用使用使用图图图图片作片作片作片作为对为对为对为对象的象的象的象的边边边边界。界。界。界。 当table设置border-collapse为collapse无效。 语语语语法:法:法:法: 取取取取值值值值:::: none:::: :::: :::: :::: [ stretch | repeat | round ]:::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto Border-image -moz-border-image -webkit-border-image     兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (×) Opera 9.64 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4 (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 使用的图片: Border-image 复制代码 Border-radius 版本:版本:版本:版本:CSS3 继承性:无 border-radius : none | {1,4} [ / {1,4} ]? 相相相相关关关关属属属属性性性性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 由浮点数字和单位标识符组成的长度值。不可为负值。 由浮点数字和单位标识符组成的长度值。不可为负值。 第一个值是水平半径。 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。 如果任意一个值为0,则这个角是矩形,不会是圆的。 值不允许是负值。 语语语语法:法:法:法: 取取取取值值值值:::: :::: border-top-left-radius:::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto Border-radius -moz-border-radius -webkit-border-radius   border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (×) Opera 9.64 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x   (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: Border-radius 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 复制代码 Copyright © 2009 Tencent ISD webteam. All Rights Reserved box-shadow 版本:版本:版本:版本:CSS3 box-shadow: || 相关属性:text-shadow 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊 值;阴影颜色 设置块阴影 语语语语法:法:法:法: 取取取取值值值值:::: ? ? || :::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto Box-shadow -moz-box-shadow -webkit-border-shadow     兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 3.0.10 (√) Chrome 2.0.x (×) Opera 9.64 (√) Safari 4 (×) IE7 (√) Firefox 3.5 (×) IE8 示例:示例:示例:示例: box-shadow 复制代码 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved Background Properties background-origin background-clip background-size multiple backgrounds background-origin 版本:版本:版本:版本:CSS3 继承性:无 background-origin : border | padding | content 相相相相关关关关属属属属性性性性: background-clip | background-size 从border区域开始显示背景。 从padding区域开始显示背景。 从content区域开始显示背景。 用来决定 background-position 计算的参考位置。 语语语语法:法:法:法: 取取取取值值值值:::: border:::: padding:::: content:::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto background-origin -moz-background-origin -webkit-background-origin -o-background-origin 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 3.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.5 (√) Chrome 2.0.x (√) Safari 4 (×) IE8 示例:示例:示例:示例: background-origin 复制代码 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved background-clip 版本:版本:版本:版本:CSS3 background-clip : border-box | padding-box | content-box | no-clip 相相相相关关关关属属属属性性性性: background-origin | background-size 从border区域向外裁剪背景。 从padding区域向外裁剪背景。 从content区域向外裁剪背景。 从border区域向外裁剪背景。 用来确定背景的裁剪区域。 语语语语法:法:法:法: 取取取取值值值值:::: border-box:::: padding-box:::: content-box:::: no-clip:::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto background-clip -moz-background-clip -webkit-background-clip -o-background-clip 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 3.0.10 (√) Chrome 2.0.x (√) Opera 9.64 (√) Safari 4 (×) IE7 (√) Firefox 3.5 (×) IE8 示例:示例:示例:示例: background-clip 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 复制代码 Background-size 版本:版本:版本:版本:CSS3 继承性:无 background-size :[ | | auto ]{1,2} | cover | contain 相相相相关关关关属属属属性性性性: background-clip | background-origin 由浮点数字和单位标识符组成的长度值。不可为负值。 取值为0%到100%之间的值。不可为负值。 设置背景图片的大小。 指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通 过cover和contain来对图片进行伸缩。 语语语语法:法:法:法: 取取取取值值值值:::: :::: :::: 说说说说明:明:明:明: 引擎类型 Gecko Webkit Presto Background-size -webkit-background-size -o-background-size 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4 (×) IE8 (×) Firefox 3.5 示例:示例:示例:示例: Background-size 复制代码 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved Multiple backgrounds 版本:版本:版本:版本:CSS3 继承性:无 background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] 相相相相关关关关属属属属性性性性: background-image | background-origin | background-clip | background-repeat | background-size | background- position 指定或检索对象的背景图像。 指定背景的显示区域。参见background-origin 指定背景的裁剪区域。参见background-clip 设置或检索对象的背景图像是否及如何重复铺排。 指定背景图片的大小。参见background-size 设置或检索对象的背景图像位置。 多重背景图象,可以把不同背景图象只放到一个块元素里。 多个图片url之间使用逗号隔开即可;如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片 应用该属性值。 CSS3中在容器的多层背景,各子属性与逗号来分隔值,如果指定的值,如下: background-image: w1, w2, w3,…, wM background-repeat: x1, x2, x3,…, xR background-size: y1, y2, y3,…, yS background-position: s1, s2, s3,…, sP 当背景层的数值是N = max(M,R, S, P) 每个属性可以假如它的值为n,通过重复指定的值如下所示: background-image: w1,…wM, w1,…wM, w1,… /* N values */ background-repeat: x1,…xR, x1,…xR, x1,… /* N values */ background-size: y1,…yS, y1,…yS, y1,… /* N values */ background-position: s1,…rP, s1,…rP, s1,… /* N values */ 范例书写: background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple- backgrounds.png); background-position: left top, -320px bottom, -640px top; background-repeat: no-repeat, no-repeat, repeat-y; 也可以简写: background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no- repeat, url(img/multiple-backgrounds.png) -640px top repeat-y; 语语语语法:法:法:法: 取取取取值值值值:::: :::: :::: :::: :::: :::: :::: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (×) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4 (×) IE8 (×) Firefox 3.5 示例:示例:示例:示例: Border-radius 复制代码 Copyright © 2009 Tencent ISD webteam. All Rights Reserved Color Properties HSL colors HSLA colors opacity RGBA colors Copyright © 2009 Tencent ISD webteam. All Rights Reserved HSL colors 版本:版本:版本:版本:CSS3 || || Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色; Saturation(饱和度)。 取值为0%到100%之间的值; Lightness(亮度)。 取值为0%到100%之间的值; HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各 样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色 系统之一。 语语语语法:法:法:法: 取取取取值值值值:::: :::: :::: :::: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Opera 9.64 (√) Safari 4 (×) IE7 (√) Firefox 3.5 (×) IE8 示例:示例:示例:示例: HSL colors 复制代码 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved HSLA colors 版本:版本:版本:版本:CSS3 || || || Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色; Saturation(饱和度)。 取值为0%到100%之间的值; Lightness(亮度)。 取值为0%到100%之间的值; alpha(透明度)。 取值在0到1之间; HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各 样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色 系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。 语语语语法:法:法:法: 取取取取值值值值:::: :::: :::: :::: :::: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Opera 9.64 (√) Safari 4 (×) IE7 (√) Firefox 3.5 (×) IE8 示例:示例:示例:示例: HSLA colors 复制代码 快速跳转 语语语语法法法法 取取取取值值值值 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved opacity 版本:版本:版本:版本:CSS3 | inherit 由浮点数字和单位标识符组成的长度值。不可为负值。默认值为:1 默认继承。 由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取 值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。 语语语语法:法:法:法: 取取取取值值值值:::: :::: inherit:::: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 3.0.10 (√) Chrome 2.0.x (√) Opera 9.64 (√) Safari 4 (×) IE7 (√) Firefox 3.5 (×) IE8 示例:示例:示例:示例:
复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 子串匹配的属性选择符 E[att$="val"] 版本:版本:版本:版本:CSS3 继承性:无 E[att$="val"] : {attribute} 相相相相关伪类关伪类关伪类关伪类: E[att^="val"] | E[att*="val"] 匹配具有att属性、且值以val结尾的E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (√) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (√) IE8 (√) Firefox 3.5 示例:示例:示例:示例: nav_相关属性测试
复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 子串匹配的属性选择符 E[att*="val"] 版本:版本:版本:版本:CSS3 继承性:无 E[att*="val"] : {attribute} 相相相相关伪类关伪类关伪类关伪类: E[att^="val"] | E[att$="val"] 匹配具有att属性、且值中含有val的E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (√) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (√) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 子串匹配的属性选择符 E[att*="val"] 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:root 版本:版本:版本:版本:CSS3 继承性:无 E:root : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only- child | E:only-of-type | E:empty 匹配文档的根元素。在HTML中,根元素永远是HTML 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:root 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:nth-child(n) 版本:版本:版本:版本:CSS3 继承性:无 E:nth-child(n) : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only-child | E:only-of-type | E:empty 匹配父元素中的第n个子元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:nth-child(n) 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:nth-last-child(n) 版本:版本:版本:版本:CSS3 继承性:无 E:nth-last-child(n) : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only-child | E:only- of-type | E:empty 匹配父元素中的倒数第n个结构子元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:nth-last-child(n) 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:nth-of-type(n) 版本:版本:版本:版本:CSS3 继承性:无 E:nth-of-type(n) : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only-child | E:only-of-type | E:empty 匹配同类型中的第n个同级兄弟元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:nth-of-type(n) 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:nth-last-of-type(n) 版本:版本:版本:版本:CSS3 继承性:无 E:nth-last-of-type(n) : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:last-child | E:first-of-type | E:only-child | E:only-of- type | E:empty 匹配同类型中的倒数第n个同级兄弟元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:nth-last-of-type(n) 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:last-child 版本:版本:版本:版本:CSS3 继承性:无 E:last-child : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:first-of-type | E:only-child | E:only-of-type | E:empty 匹配父元素中最后一个E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:last-child 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:first-of-type 版本:版本:版本:版本:CSS3 继承性:无 E:first-of-type : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:only-child | E:only-of-type | E:empty 匹配同级兄弟元素中的第一个E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:first-of-type 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:only-child 版本:版本:版本:版本:CSS3 继承性:无 E:only-child : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only-of-type | E:empty 匹配属于父元素中唯一子元素的E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:only-child 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:only-of-type 版本:版本:版本:版本:CSS3 继承性:无 E:only-of-type : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only-child | E:empty 匹配属于同类型中唯一兄弟元素的E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 (√) Firefox 3.5 示例:示例:示例:示例: 结构性伪类 E:only-of-type 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 结构性伪类 E:empty 版本:版本:版本:版本:CSS3 继承性:无 E:empty : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:root | E:nth-child(n) | E:nth-last-child(n) | E:nth-of-type(n) | E:nth-last-of-type(n) | E:last-child | E:first-of-type | E:only-child | E:only-of-type 匹配没有任何子元素(包括text节点)的元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: 结构性伪类 E:empty 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved UI元素状态伪类 E:checked 版本:版本:版本:版本:CSS3 继承性:无 E:checked : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:enabled | E:disabled | E::selection 匹配所有用户界面(form表单)中处于选中状态的元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: UI元素状态伪类 E:checked 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved UI元素状态伪类 E:enabled 版本:版本:版本:版本:CSS3 继承性:无 E:enabled : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:disabled | E:checked | E::selection 匹配所有用户界面(form表单)中处于可用状态的E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: UI元素状态伪类 E:enabled 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved UI元素状态伪类 E:disabled 版本:版本:版本:版本:CSS3 继承性:无 E:disabled : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:enabled | E:checked | E::selection 匹配所有用户界面(form表单)中处于不可用状态的E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: UI元素状态伪类 E:disabled 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved UI元素状态伪类 E::selection 版本:版本:版本:版本:CSS3 继承性:无 E::selection : {attribute} 相相相相关伪类关伪类关伪类关伪类: E:enabled | E:disabled | E:checked 匹配E元素中被用户选中或处于高亮状态的部分 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (×) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: UI元素状态伪类 E::selection 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 否定伪类 E:not(s) 版本:版本:版本:版本:CSS3 继承性:无 E:not(s) : {attribute} 匹配所有不匹配简单选择符s的元素E 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (×) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: 否定伪类 E:not(s) 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved 目标伪类 E:target 版本:版本:版本:版本:CSS3 继承性:无 E:target : {attribute} 匹配相关URL指向的E元素 语语语语法:法:法:法: 说说说说明:明:明:明: 兼容性:兼容性:兼容性:兼容性: 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×) IE6 (√) Firefox 2.0 (√) Chrome 1.0.x (√) Opera 9.63 (√) Safari 3.1 (×) IE7 (√) Firefox 3.0 (√) Chrome 2.0.x (√) Safari 4Public beta (×) IE8 示例:示例:示例:示例: 通用兄弟元素选择器 E ~ F 复制代码 快速跳转 语语语语法法法法 说说说说明明明明 兼容性兼容性兼容性兼容性 示例示例示例示例 Copyright © 2009 Tencent ISD webteam. All Rights Reserved CSS3 Properties Borders Backgrounds Color Text effects User-interface Selectors Basic box model Generated Content Other modules border-color border-image border-radius box-shadow background-origin background-clip background-size multiple backgrounds HSL colors HSLA colors opacity RGBA colors text-shadow text-overflow word-wrap box-sizing resize outline nav-up , nav-right , nav-down , nav-left attribute selectors overflow-x , overflow-y content media queries multi-column layout Web fonts speech
还剩98页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

ly101

贡献于2015-12-08

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf