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



文章版权声明:除非注明,否则均为猫屋博客MAOWUO.CN原创文章,转载或复制请以超链接形式并注明出处。

您需要 登录账户 后才能发表评论

发表评论取消回复

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,706人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码