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” (第奇数个)的效果是一样的。

: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伪类与此类似，只是匹配最后一个子元素。

 :only-child

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

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

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

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

 :only-of-type

 :only-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和简单的选择器来迎合这些选择器。否则你会被搞疯的！

出处：前端观察
责任编辑：bluehearts

上一页 征服高级CSS选择器 [5] 下一页 征服高级CSS选择器 [7]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。