CSS教程：征服高级CSS选择器(3)

4. 伪类

动态伪类

之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类：链接 和用户行为。链接就是:link 和:visited，而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中，这几个应该是最常用到的。

:link伪类用于链接尚未被用户访问的时候，而:visited 伪类用于用户访问过的链接，也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后，:focus伪类用于元素成为焦点的时候——最常用于表单元素。

你可以在你的样式表中使用多种用户行为动态伪类，这样你就可以，比如，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不同的背景色:

input:focus {
	background: #D2D2D2;
	border: 1px solid #5E5E5E;
	}
input:focus:hover {
	background: #C7C7C7;
	}

浏览器兼容性

动态伪类被所有的现代浏览器支持，甚至IE6，但是请注意，对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。

:first-child

:first-child伪类允许你定位某个元素第一个子元素。比如，如果你想给你的无须列表的第一个li添加一个margin-top，你就可以这样写：

ul > li:first-child {
	margin-top: 10px;
	}

让我们来看一看另一个例子:比如你想让你的博客的侧栏的H2标签都有个顶部边距，以将标题和它们前面的内容区分开来，但是第一个h2不需要，你就可以使用下面的代码：

#sidebar > h2 {
	margin-top: 10px;
	}
 
#sidebar > h2:first-child {
	margin-top: 0;
	}

浏览器兼容性

IE6 不支持 :first-child 伪类。根据伪类应用到的设计的不同，它或许不会成为关注的主要问题。比如，如果你使用:first-child 选择器来移除标题或段落上的头部或底部的间距，你的布局在IE6中不会坏掉，它只会看起来有些不同。但是如果你使用:first-child选择器从一个，比如浮动元素，移除左边距或右边距，将会让你的设计乱掉。

语言伪类

语言伪类:lang()，允许你匹配一个基于它的语言的元素。

你如，你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色：

:lang(en) > a#flag {
	background-image: url(english.gif);
	}
 
:lang(fr) > a#flag {
	background-image: url(french.gif);
	}

这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”，或者以“en”或“fr”开头并在后面带个连字符“-”的话。

浏览器兼容性

不幸的是，只有IE浏览器中只有IE8支持该选择器，其它的主要浏览器都支持该伪类选择器。

5. CSS 3 伪类

:target

当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使用:target伪类来控制目标的样式。

举个例子，比如你有一个很长的使用了很多文字和h2标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。

h2:target {
	background: #F2EBD6;
	}

浏览器兼容性

这一次，IE浏览器完全不支持:target伪类，另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。

UI元素状态伪类

有些HTML元素有enable 或disabled 状态(比如，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。

那么你就会想，如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框：

input:disabled {
	border:1px dotted #999;
	background:#F2F2F2;
	}

你也可能会想让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来)：

input[type=”checkbox”]:checked {
	margin-left: 15px;
	}

浏览器兼容性

所有的主流浏览器，除了我们常常不报希望的IE系列浏览器，都支持UI元素状态伪类。如果你考虑只是添加附加级别的细节和增强网站的可用性，这个仍然是可以采用的。

6. CSS 3 结构伪类

:nth-child

:nth-child()伪类允许你定位某个父级元素的一个或多个特定的子元素.

你可以通过定义它的值为一个整数来定位某个单个子元素：

ul li:nth-child(3) {
	color: red;
	}

这将会让ul元素的第三个li元素的文字变成红色。注意如果在ul里面有个其它类型的元素(不是li)，它也会算作其子元素。

你可以使用表达式来定位子元素。比如，下面的表达式将从第四个开始匹配每第三个元素。

ul li:nth-child(3n+4) {
	color: yellow;
	}

在上面的这个例子中，第一个黄色的li元素将会是第四个。如果也想从第一个开始匹配，你可以使用一个简单的表达式：

ul li:nth-child(3n) {
	color: yellow;
	}

这样的话，第一个黄色的li元素将会是第三个子元素，然后是它后面的每隔第三个。现在想象一下如果你只想匹配列表中的前四个子元素：

ul li:nth-child(-n+4) {
	color: green;
	}

:nth-child的值同样也可以被定义为“even” 或“odd”，和“2n” (第偶数个) 或“2n+1” (第奇数个)的效果是一样的。