元素选择符 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+