CSS3 Properties

属性列表

Borders

  • border-color
  • border-image
  • border-radius
  • box-shadow

Backgrounds

  • background-origin
  • background-clip
  • background-size
  • multiple backgrounds

Color

  • HSL colors
  • HSLA colors
  • opacity
  • RGBA colors

Text effects

  • text-shadow
  • text-overflow
  • word-wrap

User-interface

  • box-sizing
  • resize
  • outline
  • nav-up , nav-right , nav-down , nav-left

Selectors

  • attribute selectors

Basic box model

  • overflow-x , overflow-y

Generated Content

  • content

Other modules

  • 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


Border-color

版本：CSS3

继承性：无

语法：

border-color ： <color>

相关属性 ：border-top-color, border-right-color, border-bottom-color , border-left-color

取值：

<color>：
颜色值。

说明：

  1. 设置对象边框的颜色。

使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。

引擎类型 | Gecko | Webkit | Presto
Border-color | -moz-border-color |  |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 取值
  • 说明
  • 兼容性
  • 示例


Border-image

继承性：无

语法：

border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{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

取值：

none：
默认值。无背景图。
<image>：
使用绝对或相对 url 地址指定背景图像。
<number>：
边框宽度用固定像素值表示。
<percentage>：
边框宽度用百分比表示。
[ stretch | repeat | round ]：
拉伸 | 重复 | 平铺 (其中stretch是默认值。)

说明：

  1. 使用图片作为对象的边界。

当table设置border-collapse为collapse无效。

引擎类型 | Gecko | Webkit | Presto
Border-image | -moz-border-image | -webkit-border-image |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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-radius

继承性：无

语法：

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值：

<length>：
由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius：
由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

  1. 第一个值是水平半径。
  2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
  3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
  4. 值不允许是负值。
引擎类型 | 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 |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


box-shadow

语法：

box-shadow：<length> <length> <length> <length> || <color>

相关属性：text-shadow

取值：

<length> <length> <length>? <length>? || <color>：
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

说明：

设置块阴影

引擎类型 | Gecko | Webkit | Presto
Box-shadow | -moz-box-shadow | -webkit-border-shadow |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (×)Firefox 3.0.10 | (√)Chrome 2.0.x | (×)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


Background Properties

属性列表

  • background-origin
  • background-clip
  • background-size
  • multiple backgrounds


background-origin

继承性：无

语法：

background-origin ： border | padding | content

相关属性： background-clip | background-size

取值：

border：
从border区域开始显示背景。
padding：
从padding区域开始显示背景。
content：
从content区域开始显示背景。

说明：

  1. 用来决定 background-position 计算的参考位置。
引擎类型 | Gecko | Webkit | Presto
background-origin | -moz-background-origin | -webkit-background-origin | -o-background-origin

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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-clip

语法：

background-clip ： border-box | padding-box | content-box | no-clip

相关属性： background-origin | background-size

取值：

border-box：
从border区域向外裁剪背景。
padding-box：
从padding区域向外裁剪背景。
content-box：
从content区域向外裁剪背景。
no-clip：
从border区域向外裁剪背景。

说明：

用来确定背景的裁剪区域。

引擎类型 | Gecko | Webkit | Presto
background-clip | -moz-background-clip | -webkit-background-clip | -o-background-clip

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


Background-size

继承性：无

语法：

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

相关属性： background-clip | background-origin

取值：

<length>：
由浮点数字和单位标识符组成的长度值。不可为负值。
<percentage>：
取值为0%到100%之间的值。不可为负值。

说明：

设置背景图片的大小。

指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

引擎类型 | Gecko | Webkit | Presto
Background-size |  | -webkit-background-size | -o-background-size

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


Multiple backgrounds

继承性：无

语法：

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-image>：
指定或检索对象的背景图像。
<background-origin>：
指定背景的显示区域。参见background-origin
<background-clip>：
指定背景的裁剪区域。参见background-clip
<background-repeat>：
设置或检索对象的背景图像是否及如何重复铺排。
<background-size>：
指定背景图片的大小。参见background-size
<background-position>：
设置或检索对象的背景图像位置。

说明：

多重背景图象，可以把不同背景图象只放到一个块元素里。

多个图片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;

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


Color Properties

属性列表

  • HSL colors
  • HSLA colors
  • opacity
  • RGBA colors


HSL colors

语法：

<length> || <percentage> || <percentage>

取值：

<length> ：
Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> ：
Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> ：
Lightness(亮度)。 取值为0%到100%之间的值；

说明：

HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


HSLA colors

语法：

<length> || <percentage> || <percentage> || <opacity>

取值：

<length> ：
Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> ：
Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> ：
Lightness(亮度)。 取值为0%到100%之间的值；
<opacity> ：
alpha(透明度)。 取值在0到1之间；

说明：

HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


opacity

语法：

<length> | inherit

取值：

<length> ：
由浮点数字和单位标识符组成的长度值。不可为负值。默认值为：1
inherit：
默认继承。

说明：

由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度，opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


RGBA colors

语法：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：透明度。取值0~1之间

取值：

<length> ：
Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> ：
Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> ：
Lightness(亮度)。 取值为0%到100%之间的值；
<opacity> ：
alpha(透明度)。 取值在0到1之间；

说明：

RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


Text effects

属性列表

  • text-shadow
  • text-overflow
  • word-wrap


text-shadow

语法：

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 ： 无

取值：

<color> ：
指定颜色。
<length> ：
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> ：
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。

说明：

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (×)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (×)IE8 |  |  |  |

示例：

快速跳转


text-overflow

继承性：无

语法：

text-overflow ： clip | ellipsis

取值：

clip：
不显示省略标记（...），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（...）

说明：

  1. 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
  2. text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

兼容性：

text-overflow : clip

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

text-overflow : ellipsis

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


word-wrap

继承性：无

语法：

word-wrap ： normal | break-word

取值：

normal：
控制连续文本换行。
break-word：
内容将在边界内换行。如果需要，词内换行（word-break）也会发生。

说明：

  1. 设置或检索当当前行超过指定容器的边界时是否断开转行。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


User-interface

属性列表

  • box-sizing
  • resize
  • outline
  • nav-up , nav-right , nav-down , nav-left


box-sizing

语法：

box-sizing ： content-box | border-box | inherit

相关属性 ： 无

取值：

content-box:
此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}
border-box:
此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

说明：

改变容器的盒模型组成方式。

引擎类型 | Gecko | Webkit | Presto | Internet Explorer
Box-sizing | -moz-box-sizing | -webkit-box-sizing | -o-box-sizing/box-sizing | -ms-box-sizing

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


resize

继承性：无

语法：

resize ： none | both | horizontal | vertical | inherit

相关属性： N/A

取值：

none：
UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both：
UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal：
UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical：
UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。
inherit：
默认继承。

说明：

使元素的区域可缩放，调节元素尺寸大小。适用于任意获得"overflow"条件的容器。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

快速跳转


outline

语法：

outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit

相关属性：outline-style , outline-width , outline-offset , outline-color

取值：

<outline-color>：
指定轮廓边框颜色。参见outline-color
<outline-style>：
指定轮廓边框轮廓。参见outline-style
<outline-width>：
指定轮廓边框宽度。参见outline-width
<outline-offset>：
指定轮廓边框偏移位置的数值。参见outline-offset
inherit：
默认。

说明：

  1. outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用。
  2. outline 属性可设置元素周围的轮廓线。
  3. 轮廓线不会占据空间，也不一定是矩形。
  4. outline 属性是一个简写属性，用于设置元素周围的轮廓线。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (√)IE8 |  |  |  |

示例：

快速跳转


outline-width

语法：

outline-width： thin | medium | thick | <length>

相关属性：outline , outline-color , outline-style , outline-offset

取值：

thin：
定义细轮廓。
medium：
默认。定义中等的轮廓。
thick：
定义粗的轮廓。
<length> ：
定义轮廓粗细的值。

说明：

outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。参见outline属性。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (√)IE8 |  |  |  |

示例：

快速跳转


outline-style

语法：

outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset

相关属性：outline , outline-width , outline-offset , outline-color

取值：

none：
默认值。定义无轮廓。
dotted：
定义一个点状的轮廓。
dashed：
定义一个虚线轮廓。
solid：
定义一个实线轮廓。
double：
定义一个双线轮廓。双线的宽度等同于outline-width的值。
groove：
定义一个3D凹槽轮廓。此效果取决于outline-color的值
ridge：
定义一个3D凸槽轮廓。此效果取决于outline-color的值
inset：
定义一个3D凹槽轮廓。此效果取决于outline-color的值
outset：
定义一个3D凸槽轮廓。此效果取决于outline-color的值

说明：

outline-style 属性用于设置一个元素的整个轮廓的样式。参见outline属性。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (√)IE8 |  |  |  |

示例：

快速跳转


outline-offset

语法：

outline-offset：<length> | inherit

相关属性：outline , outline-width , outline-style , outline-color

取值：

<length>：
定义轮廓距离容器的值。
inherit：
默认继承。

说明：

outline-offset 可以让轮廓偏离容器边缘，即可以调整外框与容器边缘的距离。参见outline属性。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (√)IE8 |  |  |  |

示例：

快速跳转


outline-color

语法：

outline-width：<color> | inherit

相关属性：outline , outline-width , outline-style , outline-offset

取值：

<color>：
可以是颜色名 (如 red)，rgb 值(如 rgb(255,0,0)) 或十六进制值 (如 #ff0000)。
inherit：
默认继承。执行颜色反转（逆向的颜色）。这么做是为了使边框在不同的背景颜色中都是可见的。

说明：

outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现。参见outline属性。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4
 | (×)IE7 | (√)Firefox 3.5 |  |  |
 | (√)IE8 |  |  |  |

示例：

快速跳转


nav-index

语法：

nav-index ： auto | <number> | inherit

相关属性 ： nav-up , nav-right , nav-down , nav-left

取值：

auto：
User Agent默认的顺序。
<number>：
该数字（必须是正整数）指定了元素的导航顺序。'1'意味着最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。
inherit：
默认继承。

说明：

这个属性是HTML4/XHTML1中属性'tabindex'的取代品，从HTML4引入并参考了HTML4的建议作了轻微的修改。
该属性为当前元素指定了其在当前文档中导航的序列号。导航的序列号指定了页面中元素通过键盘操作获得焦点的顺序。该属性可以存在于嵌套的页面元素当中。
为了使user agent能按顺序获取焦点，页面元素需要遵循如下规则：
1、该元素支持nav-index属性，而被赋予正整数属性值的元素将会被优先导航。user agent将按照nav-index属性值从小到大进行导航。属性值无须按次序，也无须以特定的值开始。拥有同一nav-index属性值的元素将以它们在字符流中出现的顺序进行导航。
2、对那些不支持nav-index属性或者nav-index属性值为auto的元素将以它们在字符流中出现的顺序进行导航。
3、对那些禁用的元素，将不参与导航的排序。
用户实际上使用的开始导航和激活页面元素的快捷键依赖于user agent的设置（如，通常"tab"键用于按顺序导航，而"enter"键则用于激活选中的元素）。
user agent通常也定义了反向顺序导航的快捷键。当通过"tab"键导航到序列的结束（开始）时，user agent可能会循环到导航序列的开始（结束）。按键组合"shift-tab"通常用于反向序列导航。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


nav-up

语法：

nav-up ： auto | <id> [ current | root | <target-name> ]? | inherit

相关属性 ： nav-index , nav-up , nav-right , nav-down

取值：

auto：
User Agent默认的顺序。
<id> ：
要切换元素的id命名。
root | <target-name>：
这个参数不能以”_”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点" root " 标示，User agent将把整个frameset框架页定为目标。
inherit：
默认继承。

说明：

输入设备默认四个方向键按html文档顺序顺序来控制元素的焦点切换，但为了更好的用户体验，User agents提供了自定义切换焦点的控制顺序方向。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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-right

语法：

nav-right ： auto | <id> [ current | root | <target-name> ]? | inherit

相关属性 ： nav-index , nav-up , nav-right , nav-down

取值：

auto：
User Agent默认的顺序。
<id> ：
要切换元素的id命名。
root | <target-name>：
这个参数不能以”_”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点" root " 标示，User agent将把整个frameset框架页定为目标。
inherit：
默认继承。

说明：

输入设备默认四个方向键按html文档顺序顺序来控制元素的焦点切换，但为了更好的用户体验，User agents提供了自定义切换焦点的控制顺序方向。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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-down

语法：

nav-down ： auto | <id> [ current | root | <target-name> ]? | inherit

相关属性 ： nav-index , nav-up , nav-right , nav-down

取值：

auto：
User Agent默认的顺序。
<id> ：
要切换元素的id命名。
root | <target-name>：
这个参数不能以”_”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点”root”标示，User agent将把整个frameset框架页定为目标。
inherit：
默认继承。

说明：

输入设备默认四个方向键按html文档顺序顺序来控制元素的焦点切换，但为了更好的用户体验，User agents提供了自定义切换焦点的控制顺序方向。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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-left

语法：

nav-left ： auto | <id> [ current | root | <target-name> ]? | inherit

相关属性 ： nav-index , nav-up , nav-right , nav-down

取值：

auto：
User Agent默认的顺序。
<id> ：
要切换元素的id命名。
root | <target-name>：
这个参数不能以”_”命名，指出frameset目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点" root " 标示，User agent将把整个frameset框架页定为目标。
inherit：
默认继承。

说明：

输入设备默认四个方向键按html文档顺序顺序来控制元素的焦点切换，但为了更好的用户体验，User agents提供了自定义切换焦点的控制顺序方向。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


Basic box model

属性列表

  • overflow-x , overflow-y


overflow

继承性：无

语法：

overflow ： visible | auto | hidden | scroll

相关属性：overflow-x , overflow-y

取值：

visible：
不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：
此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：
不显示超过对象尺寸的内容
scroll：
总是显示滚动条

说明：

  1. 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
  2. 设置textarea对象为hidden值将隐藏其滚动条。
  3. 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
  4. 自IE5开始，此属性在MAC平台上可用。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


overflow-x

继承性：无

语法：

overflow-x ： visible | auto | hidden | scroll

相关属性：overflow , overflow-y

取值：

visible：
不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：
此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：
不显示超过对象尺寸的内容
scroll：
横向显示滚动条

说明：

  1. 检索或设置当对象的内容超过其指定宽度时如何管理内容。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

快速跳转


overflow-y

继承性：无

语法：

overflow-y ： visible | auto | hidden | scroll

相关属性：overflow , overflow-x

取值：

visible：
不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：
此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：
不显示超过对象尺寸的内容
scroll：
纵向显示滚动条

说明：

  1. 检索或设置当对象的内容超过其指定高度时如何管理内容。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

快速跳转


Generated Content

属性列表

  • content


content

继承性：无

语法：

content ： normal | string | attr() | uri() | counter()

取值：

normal：
默认值。
string：
插入文本内容。
attr()：
插入元素的属性值。
uri()：
插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）。
counter()：
计数器，用于插入排序标识。

说明：

content用于插入生成内容；
content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


Other modules

属性列表

  • media queries
  • multi-column layout
  • Web fonts
  • speech


media queries

语法：

@media ：<sMedia> { sRules }

取值：

<sMedia>：
指定设备名称。请参阅附录：设备类型
{sRules}：
样式表定义。

说明：

判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

快速跳转


Speech

继承性：无

语法：

属性 | 取值 | 默认值
voice-volume | <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit | medium
voice-balance | <number> | left | center | right | leftwards | rightwards | inherit | center
speak | none | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit | normal
pause-before, pause-after | <time> | none | x-weak | weak | medium | strong | x-strong | inherit | implementation dependent
pause | [ <'pause-before'> || <'pause-after'> ] | inherit | implementation dependent
rest-before, rest-after | <time> | none | x-weak | weak | medium | strong | x-strong | inherit | implementation dependent
rest | [ <'rest-before'> || <'rest-after'> ] | inherit | implementation dependent
cue-before, cue-after | <uri> [<number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud] | none | inherit | none
cue | [ <'cue-before'> || <'cue-after'> ] | inherit | not defined for shorthand properties
mark-before, mark-after | <string> | none
mark | [ <'mark-before'> || <'mark-after'> ] | not defined for shorthand properties
voice-family | [[<specific-voice> | [<age>] <generic-voice>] [<number>],]* [<specific-voice> | [<age>] <generic-voice>] [<number>] | inherit | implementation dependent
voice-rate | <percentage> | x-slow | slow | medium | fast | x-fast | inherit | implementation dependent
voice-pitch | <number> | <percentage> | x-low | low | medium | high | x-high | inherit | medium
voice-pitch-range | <number> | x-low | low | medium | high | x-high | inherit | implementation dependent
voice-stress | strong | moderate | none | reduced | inherit | moderate
voice-duration | <time> | implementation dependent
phonemes | <string> | implementation dependent

说明：

规定哪一块可以让机器来阅读。

voice-volume：
设置音量
voice-balance：
设置声音平衡
speak：
设置阅读类型
pause-before, pause-after：
设置暂停时的效果
pause：
设置暂停
rest-before, rest-after：
设置休止时的效果
rest：
设置休止
cue-before, cue-after：
设置提示时的效果
cue：
设置提示
mark-before, mark-after：
设置标注时的效果
mark：
设置标注
voice-family：
设置语系
voice-rate：
设置比率
voice-pitch：
设置音调
voice-pitch-range：
设置音调范围
voice-stress：
设置重音
voice-duration：
设置音乐持续时间
phonemes：
设置音位

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

快速跳转


columns

继承性：无

语法：

columns：宽度 || 栏目数

相关属性：column-width , column-count

取值：

column-width：
请参阅 column-width 属性
column-count：
请参阅 column-count 属性

说明：

  1. 可以同时定义多栏的数目和每栏宽度。
引擎类型 | Gecko | Webkit | Presto
columns |  | -webkit-columns |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 |  |  |  |

示例：

例子里-webkit-columns:215px 3;的意思是每列的宽度215px，一共3列。

快速跳转


column-width

继承性：无

语法：

column-width：[<length> | auto]

相关属性：columns

取值：

auto：
取计算机值
<length>：
由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

  1. 可以定义每栏的宽度。
引擎类型 | Gecko | Webkit | Presto
column-width | -moz-column-width | -webkit-column-width |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:2;的意思一共2列， -webkit-column-gap:50px;每列的间隔是50px，-webkit-column-width:300px;每列的宽度是300px。

快速跳转


column-span

继承性：无

语法：

column-span：1 | all

取值：

1：
只在本栏中显示。
all：
横跨所有栏目并定位在栏目的Z轴之上。

说明：

  1. 定义元素可以在栏目上定位显示。
引擎类型 | Gecko | Webkit | Presto
column-span |  | -webkit-column-span |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 |  |  |  |

示例：

快速跳转


column-rule

继承性：无

语法：

column-rule：<length> | <style> | <color>

相关属性：column-rule-width , column-rule-style , column-rule-color

取值：

column-rule-width：
请参阅 column-rule-width 属性
column-rule-style：
请参阅 column-rule-style 属性
column-rule-color：
请参阅 column-rule-color 属性

说明：

  1. 定义每栏之间边框的宽度,样式和颜色。
引擎类型 | Gecko | Webkit | Presto
column-rule | -moz-column-rule | -webkit-column-rule |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:5;的意思一共5列， -webkit-column-gap:60px;每列的间隔是60px，
-webkit-column-rule:5px dashed #DCDCDC;的意思是每列之间有5像素虚线灰色边框。

快速跳转


column-rule-color

继承性：无

语法：

column-rule-color：<color>

相关属性：column-rule , column-rule-width , column-rule-style

取值：

<color>：
指定颜色。

说明：

  1. 定义每栏之间边框的颜色。
引擎类型 | Gecko | Webkit | Presto
column-rule-color | -moz-column-rule-color | -webkit-column-rule-color |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:5;的意思是一共5列； -webkit-column-gap:60px;的意思是每列之间的间距是60px；
-webkit-column-rule-width:20px;的意思是每列之间的边框宽度是20px；
-webkit-column-rule-style:solid;的意思是每列之间的边框样式是实线；
-webkit-column-rule-color:#DCDCDC;的意思是边框的颜色值是#10427A。

快速跳转


column-rule-width

继承性：无

语法：

column-rule-width：<length>

相关属性：column-rule-style , column-rule-color

取值：

<length>：
由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

  1. 定义每栏之间边框的宽度。
引擎类型 | Gecko | Webkit | Presto
column-rule-width | -moz-column-rule-width | -webkit-column-rule-width |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:2;的意思是一共两列； -webkit-column-gap:200px;的意思是每列之间有200px的间距；
-webkit-column-rule-width:100px;的意思是每列之间的边框的宽度为100px；
-webkit-column-rule-style:solid;的意思是每列之间的边框的样式是实线；
-webkit-column-rule-color:#10427A;的意思是每列之间的边框的颜色值是#10427A。

快速跳转


column-rule-style

继承性：无

语法：

column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

相关属性：column-rule-width , column-rule-color

取值：

none：
默认值。无边框
hidden：
隐藏边框
dotted：
在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed：
在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid：
实线边框
double：
双线边框
groove：
根据 border-color 的值画3D凹槽
ridge：
根据 border-color 的值画3D凸槽
inset：
根据 border-color 的值画3D凹边
outset：
根据 border-color 的值画3D凸边

说明：

  1. 定义每栏之间边框的颜色。
引擎类型 | Gecko | Webkit | Presto
column-rule-style | -moz-column-rule-style | -webkit-column-rule-style |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:2;的意思是一共两列； -webkit-column-gap:200px;的意思是每列之间的间距是200px；
-webkit-column-rule-width:100px;的意思是边框的宽度为100px；
-webkit-column-rule-style:solid;的意思是边框的样式是实线边框；
-webkit-column-rule-color:#10427A;的意思是边框的颜色值是#10427A。

快速跳转


column-gap

继承性：无

语法：

column-gap：normal | <length>

取值：

normal：
normal的值为1em
<length>
由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

  1. 定义两栏之间的间距距离。
引擎类型 | Gecko | Webkit | Presto
column-gap | -moz-column-gap | -webkit-column-gap |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:2;的意思是一共两列， -webkit-column-gap:200px;的意思是每列之间的间隔是200px。

快速跳转


column-fill

继承性：无

语法：

column-fill：auto | balance

取值：

auto：
各栏目的高度随着其内容的多少而自动变化
balance
各栏目的高度将会根据内容最多的那一栏的高度进行统一

说明：

  1. 定义栏目的高度是否统一。
引擎类型 | Gecko | Webkit | Presto
column-fill |  | -webkit-column-fill |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 |  |  |  |

示例：

快速跳转


column-count

继承性：无

语法：

column-count：auto | 整数

相关属性： columns

取值：

auto：
取计算机值
整数：
由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

  1. 可以定义栏目的数目
引擎类型 | Gecko | Webkit | Presto
column-count | -moz-column-count | -webkit-column-count |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 | (√)Firefox 3.5 |  |  |

示例：

例子里-webkit-column-count:3;的意思是一共3列。

快速跳转


column-break-before

继承性：无

语法：

column-break-before：auto | always | avoid

相关属性： column-break-after

取值：

auto：
指定颜色。

说明：

  1. 定义元素之前是否断行
引擎类型 | Gecko | Webkit | Presto
column-break-before |  | -webkit-column-break-before |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 |  |  |  |

示例：

快速跳转


column-break-after

继承性：无

语法：

column-break-after：auto | always | avoid

相关属性： column-break-before

取值：

auto：
指定颜色。

说明：

  1. 定义元素之后是否断行
引擎类型 | Gecko | Webkit | Presto
column-break-after |  | -webkit-column-break-after |

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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
 | (x)IE8 |  |  |  |

示例：

快速跳转


@font-face

继承性：无

语法：

@font-face ：{属性: 取值;}

取值：

font-family：
设置文本的字体名称。
font-style：
设置文本样式。
font-variant：
设置文本是否大小写。
font-weight：
设置文本的粗细。
font-stretch：
设置文本是否横向的拉伸变形。
font-size：
设置文本字体大小。
src：
设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。

说明：

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

兼容性：

.eot格式

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

.ttf格式

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari Safari
版本 | (×)IE6 | (×)Firefox 2.0 | (×)Chrome 1.0.x | (×)Opera 9.63 | (√)Safari 3.2.1
 | (×)IE7 | (×)Firefox 3.0 | (×)Chrome 2.0.x | (√)Opera 10 | (√)Safari 4
 | (×)IE8 | (√)Firefox 3.5 |  |  |

EOT字体示例（本示例源自微软Festival of Ornament）：

快速跳转


attribute selectors

继承性：无

说明：

子串匹配的属性选择器，具体规则与正则中的匹配相似。

对照表：

选择符类型 | 表达式 | 描述
子串匹配的属性选择符 | E[att^="val"] | 匹配具有att属性、且值以val开头的E元素
子串匹配的属性选择符 | E[att$="val"] | 匹配具有att属性、且值以val结尾的E元素
子串匹配的属性选择符 | E[att*="val"] | 匹配具有att属性、且值中含有val的E元素
结构性伪类 | E:root | 匹配文档的根元素。在HTML中，根元素永远是HTML
结构性伪类 | E:nth-child(n) | 匹配父元素中的第n个子元素E
结构性伪类 | E:nth-last-child(n) | 匹配父元素中的倒数第n个结构子元素E
结构性伪类 | E:nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E
结构性伪类 | E:nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类 | E:last-child | 匹配父元素中最后一个E元素
结构性伪类 | E:first-of-type | 匹配同级兄弟元素中的第一个E元素
结构性伪类 | E:only-child | 匹配属于父元素中唯一子元素的E
结构性伪类 | E:only-of-type | 匹配属于同类型中唯一兄弟元素的E
结构性伪类 | E:empty | 匹配没有任何子元素（包括text节点）的元素E
目标伪类 | :target | 匹配相关URL指向的E元素
UI元素状态伪类 | E:enabled | 匹配所有用户界面（form表单）中处于可用状态的E元素
UI元素状态伪类 | E:disabled | 匹配所有用户界面（form表单）中处于不可用状态的E元素
UI元素状态伪类 | E:checked | 匹配所有用户界面（form表单）中处于选中状态的元素E
UI元素状态伪类 | E::selection | 匹配E元素中被用户选中或处于高亮状态的部分
否定伪类 | E:not(s) | 匹配所有不匹配简单选择符s的元素E
通用兄弟元素选择器 | E ~ F | 匹配E元素之后的F元素

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 说明
  • 对照表


子串匹配的属性选择符 E[att^="val"]

继承性：无

语法：

E[att^="val"] ： {attribute}

相关伪类： E[att$="val"] | E[att*="val"]

说明：

匹配具有att属性、且值以val开头的E元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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"]

继承性：无

语法：

E[att$="val"] ： {attribute}

相关伪类： E[att^="val"] | E[att*="val"]

说明：

匹配具有att属性、且值以val结尾的E元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


子串匹配的属性选择符 E[att*="val"]

继承性：无

语法：

E[att*="val"] ： {attribute}

相关伪类： E[att^="val"] | E[att$="val"]

说明：

匹配具有att属性、且值中含有val的E元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:root

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:nth-child(n)

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:nth-last-child(n)

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:nth-of-type(n)

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:nth-last-of-type(n)

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:last-child

继承性：无

语法：

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元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:first-of-type

继承性：无

语法：

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元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:only-child

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:only-of-type

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


结构性伪类 E:empty

继承性：无

语法：

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

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


UI元素状态伪类 E:checked

继承性：无

语法：

E:checked ： {attribute}

相关伪类： E:enabled | E:disabled | E::selection

说明：

匹配所有用户界面（form表单）中处于选中状态的元素E

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


UI元素状态伪类 E:enabled

继承性：无

语法：

E:enabled ： {attribute}

相关伪类： E:disabled | E:checked | E::selection

说明：

匹配所有用户界面（form表单）中处于可用状态的E元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


UI元素状态伪类 E:disabled

继承性：无

语法：

E:disabled ： {attribute}

相关伪类： E:enabled | E:checked | E::selection

说明：

匹配所有用户界面（form表单）中处于不可用状态的E元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


UI元素状态伪类 E::selection

继承性：无

语法：

E::selection ： {attribute}

相关伪类： E:enabled | E:disabled | E:checked

说明：

匹配E元素中被用户选中或处于高亮状态的部分

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


否定伪类 E:not(s)

继承性：无

语法：

E:not(s) ： {attribute}

说明：

匹配所有不匹配简单选择符s的元素E

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


目标伪类 E:target

继承性：无

语法：

E:target ： {attribute}

说明：

匹配相关URL指向的E元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例


通用兄弟元素选择器 E ~ F

继承性：无

语法：

E ~ F ： {attribute}

说明：

匹配E元素之后的F元素

兼容性：

类型 | IE Internet Explorer | Firefox Firefox | Chrome Chrome | Opera Opera | Safari 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 |  |  |  |

示例：

Copyright © 2009 Tencent ISD webteam. All Rights Reserved

快速跳转

  • 语法
  • 说明
  • 兼容性
  • 示例