css选择符(selector)是一种模式,类似于正则表达式,是用来匹配html或者xml文档中各种元素的css规则的一部分,紧跟在选择符后{}括号内的声明代码将会应用到所有能匹配这个模式的元素,除非它被cascade的规则覆盖了。
css选择符可以分为以下几种。
全局选择符(universal selector)
格式如下:
全局选择符可以匹配任何的html元素,不过它有一个规则就是:不匹配零个或者同时多个元素,举个例子,以下的全局选择符
div * em
对以下的html代码进行匹配
将会是以下的结果:
为什么结果没有”<em>immediate</em>”呢?,因为在<div>和<em>之间没有元素被*匹配。
元素类型选择符(Element Type Selector)
格式如下:
相对于全局选择符能匹配所有元素,元素类型选择符只能匹配哪些与选择符名称一样的元素,元素选择符是不区分大小写的,无论是html还是xml。
例子:
可以匹配html或者xml中的所有<ul>。而包含在<ul></ul>里面的内容则应用紧跟在选择符后{}括号内的声明代码。
类选择符(Class Selector)
格式如下:
根据类名来选择元素是css最常用的一种技术,例如:
将会匹配所有带有类名值为”intro”的p元素,也就是
ID选择符(ID Selector)
格式如:
ID选择符匹配那些带有一个指定的id值的元素,而且该id的值必须是唯一的,ID选择符不能同时匹配一个文档的两个以上的元素。
例如:
将会匹配id属性值为navigation的元素,如下:
属性选择符(Attribute Selector)
格式如:
一个属性选择符将根据属性或属性值进行匹配元素。
例如:
将会匹配所有带有type属性,而且属性值为submit的input元素。
伪类(Pseudo-classes)
伪类格式开始于冒号(:),而且冒号前后都不可以有空格,而最有代表性的例子莫过于链接标签了,如下面的代码:
伪元素(Pseudo-elements)
伪元素可以匹配那些在文档树结构中没有明确定义的虚拟元素。伪元素可以是动态的,因为它们所代表的虚拟元素可以改变,例如,当浏览器窗口的宽度改变的时候,它们同样可以展现的由css规则生成的内容。
在css1和css2中,伪元素开始于冒号(:),前后不可以有空格,这个和伪类是一样的,但在css3,伪元素开始于两个冒号(::),为的就是要与伪类区分开来。
css1为我们带来的是:first-letter和:first-line伪元素,而css2为我们带来的是:before和:after伪元素,css3则增加了::selection伪元素。
它们的格式如下: