样式选择符(Selectors)是用来关联和指定HTML页面中的元素与样式定义的关系的。浏览器通过样式选择符来判断页面中的元素使用何种样式表述来表现的。
样式选择符的种类
比较常用的选择符有以下几种:
·元素选择符(type selector )
·类选择符(class selector )
·ID选择符(ID selector )
·伪类选择符(Pseudo class selectors)
·伪元素选择符(Pseudo element selectors)
·属性选择符(Attribute selectors)
下面简单介绍一下这几种选择符的用法。
元素选择符
通过元素选择符可以匹配文档中的不同元素(a document language element type)所对应的样式描述。元素选择符的样式描述会应用于文档中每个元素的实例(instance of the element type )。
在HTML的页面,所谓元素就是指每个HTML标签元素,即被包在"<"和">"之间的元素。所有的HTML标签元素都可以通过元素选择符来定义他们的样式。
使用 元素选择符 定义样式的语法:元素名称 { 样式定义 }
例如:
h1{color:red}
则在HTML页面中,上面的定义会应用于页面文件中的所有H1元素:
类选择符
给页面的标签元素指定一个class的属性,可以通过这个属性值来定义样式,而这个样式会应用于所有class的属性值等于该值的元素。
使用 类选择符 定义样式的语法: .Class的属性值 { 样式定义 }
例如:
<p class="Sample"> Sample text1 </p>
<div class="Sample"> Sample text2 </div>
.Sample { color:red }
则这条样式将应用于上面的class="Sample"的P标签和DIV标签。这两段中的文字将是红色的。
另外有一点需要说明一下,类选择符是区分大小写的。
ID选择符
页面文档中的元素可以通过id这一属性来指定该元素在页面中的唯一ID。类似于class属性,在CSS中也可以通过这个ID的属性值来指定这个元素所需匹配的样式。
使用 ID选择符 定义样式的语法: #ID属性值 { 样式定义 }
例如:
<p id="Sample"> Sample text1 </p>
.Sample { color:red }
则这条样式会应用于上面id="Sample"的P标签。
伪类选择符
伪类(Pseudo-classes )是将元素按原理上的特性进行分类,而这个特性不是表现在页面上的,是指除了名称、属性或内容之外的特性。
伪类可以是动态的,在用户进行交互性操作时,某个元素可以获得或失去一种伪类属性。":first-child"和":lang()"是例外,前者可以从文件结构中演绎出,而后者则在某种情况下也可以从文件中推断出来。
·:first-child伪类
:first-child伪类是指包含在某个元素内的第一个子元素。
例如:
div > p:first-child { text-indent: 0 }
<div>
<p>在此段示例代码中DIV中第一个子元素</p>
</div>
在上面的例子中,样式将会应用于DIV中的P元素,也是第一个子元素。
<div>
<h2>XXXXX</h2>
<p>在此段示例代码中不是DIV中第一个子元素</p>
</div>
这种情况下,样式就不会应用于示例中的P元素,因为P不是DIV中的第一个子元素。
又例如:
p:first-child em { font-weight : bold }
<p>abc<em>XXXXXXX</em></p>
上面示例中,样式将应用于<EM>元素。
这里的子元素是指标签元素(属于文档结构的),所以上面的示例中虽然在<EM>标签前还有文本,但是这些文本不视为元素。
·链接伪类——:link和:visited
":link"用来定义未访问的链接;":visited"用来定义访问过的链接。
·动态伪类——:hover、:active和:focus
":hover"是指用户指示某元素,但未激活该元素。如,在浏览器中当鼠标停留在某元素上,但没有电击该元素。
":active"是指用户激活某元素时。如,用户在按下和释放鼠标键之间这段时间。
":focus"是指当元素获得焦点。
注意:在定义样式时,a:hover的样式定义要出现在a:link和a:visited之后,否则由于层叠的缘故,相同属性的属性值会被后出现的样式定义覆盖,就无法实现预期设计的效果。
·语言伪类——:lang(C)
C为语言代码,不能为空。":lang(C)"的样式将应用于语言为C的元素。
伪元素选择符
伪元素选择符用来提取文档语言本身并不包含的文档结构。如HTML语言本身并没有指出文档中的第一行、或第一个字母,但是可以通过":first-line"和":first-letter"这两个伪元素选择符来指定他们的样式。
·:first-line
用于指定某元素内的第一行内容(格式化输出后)的样式。此伪元素选择符只能应用于block-level、inline-block、table-caption 或 table-cell。
·:first-letter
用于指定某元素内的第一行第一个字母的样式。如果第一个字符是标点符号,则标点符号和它后面的第一个字母都将被选中。
·:before 和 :after
用于在元素中的内容之前或内容之后插入特定的内容。具体用法参见ttp://www.w3.org/TR/CSS21/generate.html
属性选择符
用来选择包含特定属性的元素。有四种方式:
·[att]
选择包含att属性的元素。如,h1[title] { color: blue;},该样式将应用于包含title属性的h1元素。
·[att=val]
选择包含att属性且其属性值为val的元素。如,span[class=example]{color: blue;},该样式将应用于class=example的span。
·[att~=val]
选择包含att属性,而且其属性值为用空格隔开的多个值,其中一条为val的元素。
·[att|=val]
选择包含att属性,而且其属性值为用连字符隔开的多个值,其中一条为val的元素。
浏览器对选择符的支持性
注:Y为支持,N为不支持,P为部分支持,B为Bug较多支持性不好

已上数据参考http://westciv.com/style_master/academy/browser_support/selectors.html