pseudo-classes

CSS伪类与CSS伪元素的典型与非典型应用

在上一篇《CSS伪类与CSS伪元素的区别及由来》里,已经详细区分了伪类和伪元素。但在这篇讲应用的文章里,其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别,本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法,讲述伪类和伪元素的一些使用上的小技巧。在这个过程中,始终忽略浏览器的支持情况,任何一个例子无法正确运行的话,请先检查一下你当前的浏览器,是否赶上了这个时代的浪潮~ 当然,一开始都是一些比较常规的内容,如果你对这些内容已经了然,可以直接跳到后面“非典”的部分:) 列表处理 伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。 页脚链接 页脚链接可能是一个最为合适的例子,因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列&…

CSS伪类与CSS伪元素的区别及由来

关于两者的区别,其实是很古老的问题。但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手。早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已。所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节。 无论是伪类还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准。 标准的定义 在CSS2.…