web设计人员必读 css2选择器(css2 Selectors)

CSS 选择器

学习css时，其选择器是最重要的知识点之一，为了方便大家学习，翻译了选择器模式一段。

匹配模式

*	任意元素
E	名称为 E 的元素
E F	E 的后代元素 F
E > F	E 的子元素 F
E:first-child	为其父元素第一子元素的 E
E:link E:visited	访问和未访问过的超链接元素 E
E:active E:hover E:focus	在用户行为时的元素 E
E:lang(c)	某种语言下的元素 E
E + F	匹配 F 元素，其之前有元素 E
E[attr]	匹配有 attr 属性的 E 元素
E[attr=”value”]	匹配有 attr 属性其值为 value 的 E 元素
E[attr~=”value”]	匹配有 attr 属性其值为一列用空格分隔的值，其中有一个值为 value 的 E 元素
E[lang|=”en”]	匹配一个其 lang 属性为一列用连字符值， ”en” 为这个值第一个字符的 E 元素
div.warning	仅用于 HTML, 等同于 div[class~=”warning”]
E#myid	匹配一个 id 属性为 myid 的 E 元素

 

 

 

 

 

 

注意上表所示的模式可以组合使用

 

如：

 

html > body > div.container

span[lang|=zh].hightlight

div#head a

p.headline:first-child

p + p

 

读者可以自行练习上述选择模式的意图

 

参考: http://www.w3.org/TR/2008/REC-CSS2-20080411/

 

:end