元素选择符 Element Selectors*

E

E#id

E.class

关系选择符 Relationship SelectorsE F

E>F

E+F

E~F属性选择符 Attribute SelectorsE[att]

E[att="val"]

E[att~="val"]

E[att^="val"]

E[att$="val"]

E[att*="val"]

E[att|="val"]伪类选择符 Pseudo-Classes SelectorsE:link

E:visited

E:hover

E:active

E:focus

E:lang(fr)

E:not(s)

E:root

E:first-child

E:last-child

E:only-child

E:nth-child(n)

E:nth-last-child(n)

E:first-of-type

E:last-of-type

E:only-of-type

E:nth-of-type(n)

E:nth-last-of-type(n)

E:empty

E:checked

E:enabled

E:disabled

E:target

@page:first

@page:left

@page:right伪对象选择符 Pseudo-Element SelectorsE:first-letter/E::first-letter

E:first-line/E::first-line

E:before/E::before

E:after/E::after

E::placeholder

E::selection

元素选择符 Element Selectors选择符名称版本描述*通配选择符(Universal Selector)CSS2所有元素对象。

E类型选择符(Type Selector)CSS1以文档语言对象类型作为选择符。

E#myidid选择符(ID Selector)CSS1以唯一标识符id属性等于myid的E对象作为选择符。

E.myclassclass选择符(Class Selector)CSS1以class属性包含myclass的E对象作为选择符。语法：

* { sRules }

说明：

选定所有对象。通配选择符(Universal Selector)

通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0 #12.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E { sRules }

说明：

以文档语言对象类型作为选择符。类型选择符(Type Selector)兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0+

语法：

E#myid { sRules }

说明：

以唯一标识符id属性等于myid的E对象作为选择符。ID选择符(ID Selector)兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0+

语法：

E.myclass { sRules }

说明：

以class属性包含myclass的E对象作为选择符。类选择符(Class Selector)

不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

定义多个类：

注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法

类选择符高级用法：多类选择符

此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0 #12.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

关系选择符 Relationship Selectors选择符名称版本描述E F包含选择符(Descendant combinator)CSS1选择所有被E元素包含的F元素。

E>F子选择符(Child combinator)CSS2选择所有作为E元素的子元素F。

E+F相邻选择符(Adjacent sibling combinator)CSS2选择紧贴在E元素之后F元素。

E~F兄弟选择符(General sibling combinator)CSS3选择E元素所有兄弟元素F。语法：

E F { sRules }

说明：

选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

E F VS. E>F：

此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0+2.0+4.0+3.1+3.5+3.2+2.1+18.0+

语法：

E>F { sRules }

说明：

选择所有作为E元素的子元素F。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

示例：

此例只有 .a 会被命中，因为它是 .demo 的子元素；兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E+F { sRules }

说明：

选择紧贴在E元素之后F元素。与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

E~F VS. E+F：

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E~F { sRules }

说明：

选择E元素后面的所有兄弟元素F。与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

E~F VS. E+F：

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+ #118.0+

7.0+

属性选择符 Attribute Selectors选择符版本描述E[att]CSS2选择具有att属性的E元素。

E[att="val"]CSS2选择具有att属性且属性值等于val的E元素。

E[att~="val"]CSS2选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"]CSS3选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"]CSS3选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]CSS3选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]CSS2选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。语法：

E[att] { sRules }

说明：

选择具有att属性的E元素。

例如：

此例，将会命中第一张图片，因为匹配到了alt属性兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E[att="val"] { sRules }

说明：

选择具有att属性且属性值等于val的E元素。

例如：

此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E[att~="val"] { sRules }

说明：

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。

例如：

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E[att^="val"] { sRules }

说明：

选择具有att属性且属性值为以val开头的字符串的E元素。

例如：

此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E[att$="val"] { sRules }

说明：

选择具有att属性且属性值为以val结尾的字符串的E元素。

例如：

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E[att*="val"] { sRules }

说明：

选择具有att属性且属性值为包含val的字符串的E元素。

例如：

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+

语法：

E[att|="val"] { sRules }

说明：

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

例如：

此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头兼容性：浅绿 = 支持

红色 = 不支持

粉色 = 部分支持IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.02.0+4.0+3.1+3.5+3.2+2.1+18.0+

7.0+