CSS 权威指南 笔记伪类选择器实质
为何称作 “伪类” ？ 伪就是不真实的，又是什么意思？也就是说根据文档无法准确得知当前元素应用的样式。
<!-- 可以准确得知a标签的样式 -->
<style>
a {color:blue;}
.b {text-align:center;}
</style>
<a href="" class="b" style="font-size:12px;">
<!-- 不能准确得知a标签的样式 -->
<style>
a:link {color:blue;}
a:visited {color:red;}
</style>
<a href="">当 a 处于未访问链接状态时，是蓝色的；并且可以预见当它处于已访问链接状态时，将是红色的。把这种为某些元素的状态幻象出来的类叫做 “伪类”。打个比方，指定一个人脸色的样式，是微红的；那么伪类是当他发怒时脸色是通红的，当他惊吓时脸色是白色的，这种幻象出来的类叫做 “伪类”。
再深入了解伪类是如何作用的，当 a 链接未访问时，a:link 相当于给 a 元素应用了 link 的类。
a.link {color:blue;}
<a href="" class="link">当 a 链接已访问时，a:visited 相当于给 a 元素应用了 visited 的类。
a.visited {color:red;}
<a href="" class="visited">可以理解为 css 动态处理的，然而 visited 类在文档中是找不到的，你也可以这样理解 “伪类” 。
下面介绍前文没有介绍的一个静态伪类 :first-child，通过本篇相信能容易的理解。
li:first-child { font-weight:bold; }
<ul>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
</ul>
以上代码相当于：
li.first-child { font-weight: bold; }
<ul>
<li class="first-child">我是ul的子元素</li>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
</ul>
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：