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

:nth-last-child

:nth-last-child伪类基本上和:nth-child伪类的作用相同，但是它从最后一个元素开始算。

使用上面的一个例子来看看：

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

不是匹配最前面的四个li元素，该选择器匹配最后面的四个元素。

你同样可以使用“even” 或“odd”只，同样与nth-child不同的是，这是从最后面的元素开始算的：

ul li:nth-last-child(odd) {
	color: grey;
	}

:nth-of-type

:nth-of-type伪类和:nth-child也很像，不同的是它只计算选择器中指定的那个元素。

这对定位元素中包含大量不同的元素的情况会很有用。比如，我们想控制一个文本块中的每隔一个段落，但是我们又想要无视其它元素比如图片和引用块：

p:nth-of-type(even) {
	color: blue;
	}

你也可以使用一些值，就像在:nth-child中使用的一样。

:nth-last-of-type

你能猜到它吧？！:nth-last-of-type 伪类可以像前面提到的:nth-last-child一样使用，但是这次，它将之匹配你在选择器中指定的元素类型：

ul li:nth-last-of-type(-n+4) {
	color: green;
	}

我们可以更加的聪明一些，在一个大的块级选择器中结合多种这样的伪类。比如我们想让文章中的所有的图片左浮动，除了第一个和最后一个(我们可以假设他们是满宽的，无须浮动)：

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
	float: left;
	}

所以在这个选择器的第一部分，我们从第二个图片开始定位每一个图片。在第二部分中，我们定位所有的图片，除了最后一个。因为这两个选择器并非互斥的，我们可以同时使用它们，这样就可以一下子排除第一个和最后一个元素！

:last-child

:last-child伪类的作用类似于:first-child 伪类，但是会定位父级元素的最后一个子元素。

让我们假设你不想让你的日志的div的最后一个段落也有一个底部边距：

.post > p:last-child {
	margin-bottom: 0;
	}

该选择器将定位class为”post”的元素的最后一个直接子级段落。

:first-of-type 和:last-of-type

:first-of-type 伪类用于定位一个父级元素下的第一个同类子元素。

比如，你可以定位某个特定的div的第一个子级段落(p)，并让其第一行字母大写:

.post > p:first-of-type:first-line {
	font-variant: small-caps;
	}

在这个选择器中，你可以确定你是在只定位class为”post”的元素的直接子级p元素，而且还是匹配第一个子级p元素。

:last-of-type伪类与此类似，只是匹配最后一个子元素。

nly-child

nly-child伪类表示一个元素是它的父级元素的唯一一个子元素。

比如说，你有一些盒子(“news”)，里面有一些文字段落，当你有多于一个段落的时候，你想让文字比只有一个段落的时候小一些：

div.news > p {
	font-size: 1.2em;
	}
 
div.news > p:only-child {
	font-size: 1.5em;
	}

第一个选择器中，我们定义”news”div的所有子级p元素的字体大小。在第二个中，我们覆盖之前的字体大小，如果该p元素是“news” div的唯一子元素的时候，它的字体大小会比较大一些。

nly-of-type

nly-of-type伪类表示一个元素是它的父级元素的唯一一个相同类型的子元素。

这有用什么用？假设你有一些日志，每一篇都有个class为”post”的div，他们中的一些有多于一张图片，但是有些可能就只有一张图片。你想让后者中的图片水平居中，而在其它的有多于一张图片的日志中，就将它左浮动。这个需求用这个选择器就很容易实现：

.post > img {
	float: left;
	}
 
.post > img:only-of-type {
	float: none;
	margin: auto;
	}

:empty

:empty伪类表示一个元素里面没有任何内容。

这个选择器可以用很多种用途。比如，你在你的“sidebar”中有若干个盒子，但是不想让空盒子显示出来：

#sidebar .box:empty {
	display: none;
	}

注意，就算”box”div里面只有一个空格，它也不会被css当作空标签的，这样就不能匹配该选择器了。

浏览器支持

Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器中指出这些选择器。这意味着，使用这些选择器对网站的可用性和可访问性是很有用的，或者如果网站的用户中的大部分是使用IE而且你不想在某些细节上无视他们，最好还是保持使用通用的class和简单的选择器来迎合这些选择器。否则你会被搞疯的！