HTML5移动Web开发指南——6.2.2 伪类选择器

伪类选择器 在CSS3选择器中，伪类选择器种类非常多。然后在CSS2.1时代，伪类选择器就已经存在，例如超链接的四个状态选择器：a:link、a:visited、a:hover、a:active。 CSS3增加了非常多的选择器，其中包括:  first-line伪元素选择器  first-letter伪元素选择器  root选择器  not选择器  empty选择器  target选择器 这些伪类选择器是CSS3新增的选择器，它们都能得到在Android和iOS平台下Web浏览器的支持。现在我们就为你介绍这部分的选择器。 1．before before伪类元素选择器主要的作用是在选择某个元素之前插入内容，一般用于清除浮动。 目前，before选择器得到支持的浏览器包括：IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。 before选择器的语法是： 元素标签:before{ content:"插入的内容" } 例如，在p元素之前插入“文字”： p.before{ content:"文字" } 2．after after伪类元素选择器和before伪类元素选择器原理一样，但after是在选择某个元素之后插入内容。 目前，before选择器得到支持的浏览器包括：IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。 after选择器的语法是： 元素标签:after{ content:"插入的内容" } 3．first-child 指定元素列表中第一个元素的样式。语法如下： li:first-child{ color:red; } 4．last-child 和first-child是同类型的选择器。last-child指定元素列表中最后一个元素的样式。语法如下： li:last-child{ color:red; } 5．nth-child和nth-last-child nth-child和nth-last-child可以指定某个元素的样式或从后数起某个元素的样式。例如： //指定第2个li元素 li:nth-child(2){} //指定倒数第2个li元素 li:nth-last-child{} //指定偶数个li元素 li:nth-child(even){} //指定奇数个li元素 li:nth-child(odd){} 本节我们只介绍了部分常用的CSS选择器，实际上选择器并不止这几种，其余的选择器不再详细介绍，有兴趣的读者可以阅读CSS3相关资料。