唯物不唯心
理性不感性

CSS中的伪类和伪元素

CSS2.1中的伪类有:□:link——未访问过的链接;□:visited——访问过的链接;□:hover——鼠标悬停的元素;□:focus——获取焦点的元素;□:active——激活的元素(例如一个被单击的链接元素);□:first-child——作为其他 元素第一个子元素的元素;□:lang()——根据元素的lang属性确定的元素。CSS2.1中的伪元素有:□::first-line □::first-letter □::before □::after.

那么区别在哪儿呢?区别就在于这些伪选择器影响文档的方式不同。伪类的表现有点儿像给文档添加类,而伪元素的效果就好像有元素被插入到了文档中。

以::first-letter为例,假设你要把每个h1的第一个字母增大到其他字母的两倍半(如上图所示),很简单: h1::first-letter {font-size: 250%;}这就仿佛CSS和标记被修改成了这样:h1 first-letter {font-size: 250%;}<h1><first-letter>H</first-letter>owdy, y’all!</h1>

这真的是浏览器内部真实发生的情况吗?谁知道呢,反正结果确实像是发生了这种情况,因此才有了“伪元素”这个名字。 类似地,伪类的表现就像是它们使文档中的元素被添加了新的类。

例如,想象一下若对于每一个作为其他元素第一个子元素的元素,浏览器给它们都附加了一个名为first-child的类,然后就可以像下面这样为它们应用样式了:li.first-child {border-left: none;}只需要简单地把点改成冒号就变成了li:first-child,就可以得到同样的最终效果,而不用费力把类添加到所有标记上。有时还会看到伪元素使用双冒号的语法,这是在CSS2.1之后引入的。