狠狠撸

CSS2 – 伪类选择符、伪元素选择符十年磨一剑 [email_address] 2010.02.08

本文档的内容分为两部分是什么？怎么用？

是什么？为什么叫“伪”类选择符和“伪”元素选择符呢？这个名称中之所以有个“伪”字，是因为它选择的并不是直接存在于文档树中的某一个或某一类元素。图片来源：《 JavaScript DOM 编辑艺术》

是什么？我们平时常用的，如：类型选择符（ P 、 li …… ）类选择符（ .title 、 .date …… ） ID 选择符（ #logo 、 #nav …… ）它们都会与文档树中的元素相对应 <div id="header"> <h1 id="logo"> <a href="index.html">CSS</a> </h1> <ul id="nav"> <li><a href="what.html"> 是什么？ </a></li> <li><a href="how.html"> 怎么用？ </a></li> </ul> </div> <div id="content"> <h2 class="title"> 为什么叫“伪”类选择符和“伪”元素选择符呢？ </h2> <div class="date">2010/02/07</div> <div class="article-body"> <p>......</p> <p>......</p> </div> </div>

是什么？这些选择符能满足我们的大部分需求。但在传统印刷品中常见的首字下沉、首行文字样式不同的效果，如图：在网页上怎么用 CSS 来实现呢？或者说怎么把 CSS 样式应用到某个 P 元素的第一行上或第一个字上呢？上面这段文本在不同页面宽度、不同屏幕大小或字体尺寸不同的时候首行文字的数量是不一样的，那么我们就无法在文档中用某个标签来预先定义好首行文字。

是什么？ CSS 考虑到这一点，所以提供了伪元素选择符，我们可以用伪元素选择符来为元素的某部分内容定义样式。除了伪元素选择符， CSS 还为我们准备伪类选择符。什么是伪类选择符呢？网页与传统印刷品最大的不同之处是网页之间可以连接、网页可以与用户交互，例如：从一个网页跳到另一个网页（链接）、注册 & 登录、提交表单（交互） …… CSS 伪类选择符就是为这准备的，它可以根据元素的状态或用户的操作来赋予元素不同的样式，例如：鼠标划过链接、点击链接时改变链接的颜色、背景等等，从视觉上给用户的操作一个反馈，这对用户的浏览体验是一个很大的提升。

是什么？ OK ，了解了 CSS 提供一个选择符的目的后就能更有效的使用它。

怎么用？先看伪类选择符， CSS2 中有下面这些伪类选择符 :link :visited :hover :active :focus :first-child :lang 我们用得最多应该是这四个 :link 　　　未访问的链接 :visited 已访问的链接 :hover 　　指向某个元素时（如：鼠标移到链接上时） :active 元素被用户激活时（如：鼠标点击链接时） demo: http://www.butong.net/demo/css/pseudo-selectors/demo1.html

怎么用？下面是一个 menu 的 html 代码 <ul class="menu"> <li><a href="http://www.w3.org/">W3C</a></li> <li><a href="http://www.webstandards.org/">WaSP</a></li> <li><a href="http://www.w3school.com.cn/">w3school</a></li> </ul> 这就为 menu 的链接定义了四种颜色，当然不是让这四颜色同时应用到链接上（虽然它们都指向 menu 的链接），而是根据链接在客户端的状态或用户的行为来改变颜色。 .menu a:link { color: blue; } .menu a:visited { color: olive; } .menu a:hover { color: red; } .menu a:active { color: green; } 我们可以像下面这样来定义这个 menu 的链接颜色

怎么用？这个几个伪类的使用方式很简单，但其中有一些规则需要了解。在 CSS 中可以用多种不同的选择符模式来指向同一个元素，例如： li a { color: red; } ul a { color: green; } 上面两种选择符都可以指向菜单的链接，但不可能让链接同时应用两个颜色，所以 CSS 就定一个选择符的优先级规则，这个优先级会根据选择符的权重和位置来计算。上面的两种选择符都是由两个类型选择符组成，在选择符方面它们的权重是一样的，那么接下来就会根据它们在代码中的位置来决定优先级，越靠后的选择符优先级会越高，所以上面应用于菜单链接的颜色会是后面的 green 。

怎么用？那么前面介绍的伪类选择符有没有这个优先级问题呢？从选择符形式上可以看出它们的权重是一样的，因为它们是同一类选择符，那么它们在代码中的书写顺序会不会影响样式的应用呢？如果把前面 menu 样式中的的 a:link 和 a:hover 在代码中的位置对换一下，把 a:link 放在 a:hover 的后面，那么在鼠标移上链接时还会应用 a:hover 选择符中的样式吗？前面说过这几个伪类选择符是根据元素在客户端的状态或用户的行为来应用样式，那么状态之间肯定会有一个互相排斥的情况，例如 :link 和 :visited ，一个链接不可能即处于未访问状态又处于已访问状态，这两个选择符是互相排斥的，它们定义的样式不可能同时应用于链接，那么它们之间也就不需要有一个优先级，所以 :link 和 :visited 在代码中的位置是无关紧要的。

怎么用？那么 :hover 和 :active 呢？一个表示“指向某个元素”、一个表示“元素被用户激活”，这两种状态会互相排斥吗？不会，因为在一个元素被激活时（例如点击链接时）必定是先指向这个元素的情况下，所以在这个时候元素即是 active 状态，也是 hover 状态，此时元素就同时拥有两种状态，那么最终会应用哪个样式，就由它们的优先级决定，而它们在代码中的顺序会影响它们的优先级，也就决定哪段代码最终会应用在元素上。

怎么用？看下面这 menu <ul class="menu"> <li><a href="http://www.w3.org/">W3C</a></li> <li><a href="http://www.webstandards.org/">WaSP</a></li> <li><a href="http://www.w3school.com.cn/">w3school</a></li> </ul> 上面的样式定义了 menu 的链接在鼠标指向时为红色，鼠标点击时为绿色，如果把 a:hover 放到 a:active 后面 .menu a:link { color: blue; } .menu a:visited { color: olive; } .menu a:hover { color: red; } .menu a:active { color: green; } .menu a:link { color: blue; } .menu a:visited { color: olive; } .menu a:active { color: green; } .menu a:hover { color: red; } 那么点击链接时应用的会是 :hover 中定义的 color ，文字变为红色。 demo: http://www.butong.net/demo/css/pseudo-selectors/demo2.html

怎么用？所以在定义链接样式时 :hover 要放在 :active 前面，否则 :hover 中的样式会把 :active 中相同的样式覆盖。那么这两种状态能不能和前面的 :link 或 :visited 状态并存呢？也是可以的。如果像上面这样把 a:link 放到最后，那么在鼠标移上链接和点击链接时颜色都会是蓝色。 ( 注：在链接已被点击后， :link 状态就消失了，那么上面 :link 中定义的 color 就不会覆盖前面的 :hover 和 :active 中定义的 color) .menu a:visited { color: olive; } .menu a:hover { color: red; } .menu a:active { color: green; } .menu a:link { color: blue; } demo: http://www.butong.net/demo/css/pseudo-selectors/demo3.html

怎么用？在用伪类为链接定义样式时应该按 LVHA 这个顺序来写代码 :link :visited :hover :active

怎么用？ IE6 问题 IE6 是个讨厌的东西 ~ 上面的伪类在 IE6 中有一些问题我们一般都会为网页写的一个基本的链接样式，如： a:link { color: blue; } a:visited { color: #551A8B; } a:hover,a:active { color: red; } 然后对于导航菜单等一些特殊链接可以用下面的方式写一个不同的样式 .menu a { color: #000; } 有时候我们会让鼠标移上菜单时只改变背景色，而文字颜色保持不变，那么用上面这种写法是最有效率的。但在 IE6 中就有问题。 demo: http://www.butong.net/demo/css/pseudo-selectors/demo4.html

怎么用？前面的 menu 链接在 IE6 中默认的颜色显示正常，是应用的 .menu a 中定义的 color ，但在鼠标移上链接时却是应用的 a:hover 中定义的 color ，这是 IE6 对 a:hover 选择符和 .menu a 选择符优先级的一个错误判断， .menu a 选择符的优先级应该比 a:hover 选择符更高， IE6 却认为 a:hover 比 .menu a 更高。由于有这个问题所以我们在写样式时可能会像下面这样写 .menu a:link,.menu a:visited,.menu a:hover,.menu a:active { color: #000; } 但这种写法显然不如前面的简洁，如果有子菜单又要不同的样式的话那代码会更臃肿 .menu a:link,.menu a:visited,.menu a:hover,.menu a:active { color: #000; } .menu ul a:link,.menu ul a:visited,.menu ul a:hover,.menu ul a:active { color: #FF0; }

怎么用？那是不是一定要这样写呢？这个问题既然 IE6 对优先级判断错误引起的，那能不能换种方式让菜单链接拥有更高的优先级呢，试试下面的方法 ~ 哈 ~ 这样在 IE6 里的没问题了 ~ <div id=“nav”> <ul class="menu"> <li><a href="http://www.w3.org/">W3C</a></li> <li><a href="http://www.webstandards.org/">WaSP</a></li> <li><a href="http://www.w3school.com.cn/">w3school</a></li> </ul> </div> #nav a { color: #000; } demo: http://www.butong.net/demo/css/pseudo-selectors/demo5.html

怎么用？ OK ，前面说的都是链接，其实这个伪类并不是只能用于链接。在 CSS2 中 demo: http://www.butong.net/demo/css/pseudo-selectors/demo6.html :link 和 :visited 称为链接伪类 :hover 和 :active 称为动态伪类动态伪类除了用于链接还能用在其他元素上例如：可以像下面这样，在鼠标移上段落时改变背景色和文字的颜色 p:hover { background: red; color: yellow; }

怎么用？甚至可以在鼠标移上元素时来显示或隐藏另一个元素，像下面这样 demo: http://www.butong.net/demo/css/pseudo-selectors/demo7.html <div class="entry"> <h1 class="entry-title">Title</h1> <div class="entry-body"> <p>Content</p> </div> </div> .entry-body { display: none; } .entry:hover .entry-body { display: block; } 这个动态伪类很强大，不过有一点遗憾，讨厌的 IE6 不支持这样的用法，当然，这不是大问题， IE6 还是用优雅退化的方式来对待吧，很多时候不必追求完全一致。

怎么用？ OK ，接着介绍另外三个伪类 :focus :first-child :lang :focus 当元素获得焦点什么叫获得焦点呢？例如：浏览网页时可以按 Tab 键在链接之间移动，每按一下就会定位到下一个链接，此时的焦点就到了这个链接上。可以像下面定义链接焦点的样式 a:focus { background: red; } demo: http://www.butong.net/demo/css/pseudo-selectors/demo8.html

怎么用？更多的时候 :focus 是用于表单元素，如：输入框，我们可以在光标定位到输入框时给用户一个反馈，如换一个背景色，像下面这样 input[type=“text”] { background: #FFFFCC; } 再次提示， IE6 和 IE7 不支持 :focus demo: http://www.butong.net/demo/css/pseudo-selectors/demo9.html :first-child 伪类这个伪类有点特别，它并不是根据元素的状态或用户行为来定义样式，而且根据文档中处于某个位置的元素，它匹配的元素必须是另一个元素的第一个子元素。

怎么用？这是个很实用的伪类，例如： .menu li { display: inline; border-right: 2px solid #000; padding: 0 10px; } 我们可以用上面这种方式为菜单之间加一个分隔线 demo: http://www.butong.net/demo/css/pseudo-selectors/demo10.html 那这个时候 :first-child 伪类可以派上用场了但这个分隔线会出现每一个菜单项后面，而我们可能希望分隔只出现在菜单项之间，像下面这样 .menu li { display: inline; border-left: 2px solid #000; padding: 0 10px; } .menu li:first-child { border-left: 0; } 这样就把多余的那个分隔线去掉了 demo: http://www.butong.net/demo/css/pseudo-selectors/demo11.html

怎么用？ :lang 根据元素的语言来定义样式我们在做网页经常会为 html 元素加一个 lang 属性来定义文档语言，像下面这样 <html lang=“zh-CN”> demo: http://www.butong.net/demo/css/pseudo-selectors/demo12.html 那么我们就可以为不同语言的文档定义不同样式 html:lang(“zh-CN”) body { font: 14px/1.5 Arial; } 再次提示， IE6 、 IE7 不支持 :lang 伪类

怎么用？ OK ，大致的介绍了一下伪类选择符的用法，接下来介绍伪元素选择符。 CSS2 中有下面这四个伪元素选择符 :first-line :first-letter :after :before demo: http://www.butong.net/demo/css/pseudo-selectors/demo13.html 先看 :first-line 和 :first-letter 前面说过伪元素可以在网页上实现传统印刷品中的一些效果，如：首字下沉、首行文字加粗，就是用这个两伪元素来实现的，例如： p:first-line { font-weight: bold; } 这样就能让 p 元素的第一行文字加粗显示

怎么用？这样就能改变 p 元素的第一个字的样式 P:first-letter { float: left; margin: 2px 8px 0 0; font-size: 36px; } demo: http://www.butong.net/demo/css/pseudo-selectors/demo14.html :before 和 :after ，这两个伪元素可以为文档添加额外的内容，例如： blockquote p:before { content: “01C”; } blockquote p:after { content: “01D”; } 这样可以让 blockquote 元素里段落内容包含在一个引号中。 demo: http://www.butong.net/demo/css/pseudo-selectors/demo15.html

怎么用？ demo: http://www.butong.net/demo/css/pseudo-selectors/demo16.html 或者也可以用它来实现清除浮动的效果，如： .menu:after { content: “020 “; display: block; clear: both; } 我们很少用这两个伪类来为文档添加内容，主要是主流浏览器对它们的支持不够好，但这是两个很实用的选择符，下次会抽时间再单独讲讲这两个伪元素。

OK ，对 CSS2 伪类和伪元素的介绍就到这里下面有两道题目，有兴趣的同学可以做一下题目一： http://www.butong.net/exercise/css/exercise1/ 题目二： http://www.butong.net/exercise/css/exercise2/ 谢谢 : ）

狠狠撸

Css2 伪类选择符和伪元素选择符

More Related Content

Css2 伪类选择符和伪元素选择符