这个 span 还真不是白加的，自动适应内容宽度+导角。a:hover 换图片也不是真换，而是使用同一张图片，通过position调出另一部分，这样做的好处是不需要下载，没有“跳”的感觉。不错的代码，Enjoy …

html代码部分为

效果页面，css和html写得很清楚。

下载html打包文件

via 客齐集社区

：（，这是主题

Livid 在 1 月前发起主题：这个社区的一行代码片段，给好奇的人

$p->URL->vxToRedirect($p->URL->vxGetLogin($p->URL->vxGetTopicModify($topic_id)));

So you know what happened.

下面是回复

1 楼 - 好名字 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

支持一下,虽然看不懂,呵呵. ^_^

2 楼 - jianshuo 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

这个社区上千行得程序都是有这种诡异的代码组成的。

3 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

A bundle of unintentional scripts.

4 楼 - 狂飙 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

真是看不懂呀？为什么要弄这样的代码呀？？？

5 楼 - 合法操作 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

看不懂，连个空格都舍不得放！

6 楼 - gbgbgb 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

> $p->URL->vxToRedirect($p->URL->vxGetLogin($p->URL->vxGetTopicModify($topic_id)));

这段东西写的不好.

去掉前缀vx不说，ToRedirect(), GetLogin()以及GetTopicModify()这三个method的命名本身就存在问题。看不懂这段代码的人纯粹是因为看不懂这几个名称，而不是代码本身有何高深之处，无非是嵌套了3个函数调用而已。如果我猜得不错，GetLogin可能是身份认证，ToRedirect可能是一个简单的重定向。

7 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

^_^ show me a better one then?

8 楼 - gbgbgb 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

GetLogin -> is_user_valid

ToRedirect -> redirect_to

9 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

那么让我看看你的作品？

10 楼 - gbgbgb 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

我会写且不愿意写php（比如为了工作需要迫不得已最近用php+perl实现了一套session机制），要做这种事我宁愿用更成熟的MVC构架，比如struts or rails. 优秀的代码世界上有的是，也不少我这一份。况且我写的代码一向以简洁为主，一个函数不超过10行，贴出来也没什么可看。

11 楼 - 绿豆 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

个人认为gbgbgb同学的写法顺眼。。。汗～～

12 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

可问题是，is_user_valid 这样的过程不是我的那句话干的事情。

$p->URL->vxToRedirect($p->URL->vxGetLogin($p->URL->vxGetTopicModify($topic_id)));

这句的意思是，把 topic 的 ID 传给 Page 类对象的实例 $p 的子类 URL 的 vxGetTopicModify 方法，该方法根据配置文件中是否启用 URL Rewrite 而返回一个构造好的 URL，将该 URL 传给 $p 的子类 URL 的 vxGetLogin 方法，该方法根据配置文件中是否启用 URL Rewrite 而返回一个登录的 URL，及登录成功之后自动返回的 URL（即其所接受的参数 1），将该方法的返回 URL 传给 $p 的子类 URL 的 HTTP 302 Object Moved 的实现从而让浏览器进行跳转。

命名规则为：函数名中的 vx 表示来自 V2EX 标准类库中的类的方法，此外还有 vk 表示来自 Project VIK|Engine 中的辅助类的方法，and so on。就像在 OpenGL 应用程序中有像 glTexCoord2f() 这样的标准类库函数及像 glutDisplayFunc() 这样的来自 GLUT 的辅助函数一样。

vx 及 vk 后面的动词将函数按照类型分类，比如 vxTo 开头的用于转向，vxGet 开头的用于构造 strings，vxCheck 开头的用于逻辑计算，vxTopic 开头的表示和 Topic 渲染有关的 Page 对象的方法等等。

13 楼 - gbgbgb 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

vxGetTopicModify这类名称怎么看都是不合适的。根据你的目的，应该命名为 URL->create_by_topicid. create这个动词也可以换成其他的，比如generate.

至于GetLogin, 是我没有猜准你的意图（一方面也因为你的函数命名问题太多）。如上所述，create_login比较合适。最后么，ToRedirect -> create_redirect.

说实话我认为这种URL的处理实在不够清晰。

还有你用的前缀，openGL lib之所以用前缀，是因为他是一个C写出来的函数库，不是面向对象的，为了避免名称污染不得不用前缀。你的PHP如果用纯函数编写，那么可以适当使用前缀，但既然用了OO，用前缀就是多余。

14 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

那么请您解释一下，同样是完全面向对象的 Cocoa 为什么所有的函数名和对象名前面还要用 NS 做前缀？

关于 vxGetTopicModify()，除此之外，还有 vxGetTopicView()，vxGetTopicNew()，vxGetTopicCreate()：

vx - 我喜欢的前缀。

Get - 执行的操作的类型。

Topic - 相关的对象。

Modify - 和对象相关的东西。

So 该函数由四段构成。

15 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

http://developer.apple.com/cocoa/

16 楼 - gbgbgb 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

先声明我以前从来没有接触过cocoa

匆匆扫了一遍。它提供的API有Object-C和Java两类

Object-C的function都加了前缀，这是C语言本身的限制。

Java API只有Class Name用了前缀，method没有用。ClassName用前缀是可以的，因为在相同的scope内import两个不同的namespace有时候会引起名称污染的现象。

所以说你在PHP本身拥有OO语法的时候仍然对method name加了前缀，只能说明技术的不成熟，对于什么时候需要，什么时候不需要前缀一知半解。此外抛开前缀，方法名的后半部那纯粹是在胡闹了。不用说让别人来读，你试试看自己过3个月回头再来读自己写的代码，那时候你就知道一个好的命名方式有多重要。

实际上你贴出的代码命名只是一个小问题，程序的构造才是大问题。还是这句话，这种结构的语句你放他一段时间回过头来自己再读一遍看看。

17 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

>> Object-C的function都加了前缀，这是C语言本身的限制。

不是 Object-C，是 Objective C，Objective C 是一种 C 的超集，很多语法和 C 完全不同，具有完整 OOP 特性的语言。

http://www.objc.info/about/

此外，也没有人习惯把 Objective C 叫做 Object-C。

……

>> 此外抛开前缀，方法名的后半部那纯粹是在胡闹了。

您在没有通读过一个系统的全部代码和构思的前提下得出这样的结论，我还能说什么好呢？

从我的角度而言，程序的前缀有的时候是一种文化符号，比如 Cocoa 中无论是对象名 or 方法名中的 NS 就来自于 Steve Jobs 的 NextStep，为什么不能在方法名前面用前缀呢，难道在方法名前面用了前缀编译出来的代码就慢了或者是明天地球就爆炸了？而至于用 SomeMethod 或者 some_method 我觉得这个是个人的风格问题。难道您就真的觉得 a 文化比 B 文化一定好吗？况且关于好和坏每个人有自己的判断标准，我贴出这样的一行代码，从开始到现在我并非在刻意标榜我自己的 style 就一定比别人的好，而且我根本不想有任何的 argue，我宁愿始终微笑着中立着，但是至少我有张贴我喜欢的字符串的自由。

我想您可能之前完成过比客齐集社区要庞大得多的项目，因此您在此方面非常具有心得。那么当我这样一个今年刚满 20 岁的 PHP 新人开开心心地贴出我自己喜欢的一行代码的时候，就拜托您别把您的历史积累下来的沉重压到我背脊上了，因为对我来说，这样的 argue 实在是毫无轻松感可言。并且最重要的是，这套“纯粹是在胡闹”的代码现在每天正在 server 上很开心地跑着，对于那些不懂技术的正常用户来说，这个网站 it just works，那不就足够了么？

18 楼 - gbgbgb 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

虽然你今年刚满20，但是编程年数也不少了，容不得批评怎么成大器。你有勇气把自己写的代码贴出来，就必须承担被人批评的风险，否则就不要贴。此外我虽年龄比你大一些，但从编程的时间来讲我们差不了多少。

你所谓的it just works的代码满世界都有，但是这些代码是不可维护的，是毫无时间价值的。一个普通的中学生也可以写出可以跑但是没有价值的代码。你如果把这种风格当宝贝的话，你永远都只能是一个碌碌无闻的SOHO程序员，而无法成为一个有出息的人。

19 楼 * 楼主 Livid 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

呵呵，我高三的时候退学，还真的就是个普通的中学生，哈哈。

20 楼 - 阿三 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

gbgbgb同学的话是有道理的。

没有清楚的naming convension和结构将来很难使一个team在这个project上协同工作，将来必然会在规模和发展上手到限制。

我相信维护成本也会很高。

21 楼 - 大灰狼 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

这个贴子我看了一个小时-_-#

怎么说呢,我是gbgbgb的支持者。

That’s all.

22 楼 - 梦随心菲 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

事实上，谁都没有错，命名方式有很多种，不仅仅是某一种，应该根据代码编写者提供的阅读方法。

这里没有错误的，大家都是对的，这段代码是很简洁，确实不利于维护和协同工作。

23 楼 - Bigyu 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

学习中，目前我也没有学好用好一套好的命名方式

学习

24 楼 - Dead Boy 在 1 月前回复道：Re: 这个社区的一行代码片段，给好奇的人

有趣和激烈的讨论,每个人都有自己的编程风格和习惯,有必要一定的跟着权威的方式走吗?

and, PHP中如何避免302, rewrite并不是用来解决这个问题的吧?

(语言转行中,not IT sir)

25 楼 - xwake 在 4 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

“容不得批评怎么成大器”

这句改成“容得批评，方可成大器”，即是我的观点。

26 楼 - ChinaGG.com 在 4 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

这个都不懂啊？

这是GOOGLE给ADSENCE，特别是提供捆绑GOOGLE工具栏的FIRE FOX下载的统计代码，结帐的依据！！

27 楼 - ato 在 3 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

云里雾里~

28 楼 - amsea 在 3 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

别吓到 livid， 他写的很多东西还是值得大家去学习的

那个批评人的，你可以讲出你的东西，但是批评就免了

你可以拿你的优秀的地方出来给大家学习学习

我觉得 livid 写的这个社区是无可挑剔的，包括美工在内。

国内的各个语言的社区来说，目前我觉得最不错的还是这个社区，虽然仅仅是个beta版本的。

试问你写出了什么样的东西，跑的比这个 livid 的社区还欢快？

我不是怀疑你没有，我是说你可以列出来，我们了解了解。

29 楼 - gbgbgb 在 2 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

写社区是技术含量很低的工作。

30 楼 - SunGis 在 2 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

希望看到gbgbgb所谓自己实现的技术含量很高的作品。。-﹃_﹃凸~

31 楼 - Predator 在 2 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

神仙打架……

32 楼 - 绿豆 在 2 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

提议看看GBGBGB的作品

33 楼 - 深蓝色 在 2 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

LIVID做的东西我很喜欢。但说实在的，这样的代码似乎不便于团队里的其他人理解呀~~~

34 楼 - Alex Huang 在 1 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

对天才般的孩子，还是宽容点好。

35 楼 - 卡飞菲 在 1 星期前回复道：Re: 这个社区的一行代码片段，给好奇的人

年轻就是好啊，理论的东西都要靠实践，这个社区很好。

36 楼 - 熊。 在 6 天 13 小时前回复道：Re: 这个社区的一行代码片段，给好奇的人

有些东西没必要这么死。别把中国老套的条条框框压在我们这代人的头上，的确，有很多人都承受不起的。再说了，计算机编程方面没有自己的风格，怎么能自己独立创新呢？所以我觉得有时这样倒会让人觉得有些……

Livid也要虚心学习其中有用的部分。建议有时也许是好的。

37 楼 - RogerTse 在 5 天 20 小时前回复道：Re: 这个社区的一行代码片段，给好奇的人

说实话　这类社区技术含量真的很低。

不过　能写出来总不没写出来的好　　just all

38 楼 - jujude 在 1 天 5 小时前回复道：Re: 这个社区的一行代码片段，给好奇的人

just for fun!

is all

Blogger web 组件，可以看到Blogger中别人就你看到的这个页面的评价，也可以 blog this

以下为引用内容:

---

Blogger Web Comments for Firefox is an extension that makes it easy to see what bloggers are saying about a page you’re viewing in Firefox and even make your own blog post about it, all without leaving the page you’re on.

---

安全，还是安全…

以下为引用内容:

---

Google Safe Browsing is an extension to Firefox that alerts you if a web page that you visit appears to be asking for your personal or financial information under false pretences. This type of attack, known as phishing or spoofing, is becoming more sophisticated, widespread and dangerous. That’s why it’s important to browse safely with Google Safe Browsing. By combining advanced algorithms with reports about misleading pages from a number of sources, Safe Browsing is often able to automatically warn you when you encounter a page that’s trying to trick you into disclosing personal information.

For more information, see the FAQ.

---

via http://googleblog.blogspot.com/2005/12/new-firefox-extensions.html

via Flock公司CEO Bart谈社会化浏览器远景

以下为引用内容:

---

Flock公司是美国知名浏览器公司，它的创始人，该公司的首席执行官Bart Decrem以及部分工程师一手打造了Firefox火狐浏览器，随后于去年秋天开始着手开发Flock社交浏览器，并在不到一年的时间里完成了这款浏览器产品的开发。

　Bart是Mozilla基金会的重要成员，曾帮助Mozilla基金会制定了商务模式，并开发了Firefox浏览器。是原firefox的市场推广的负责人，在很短的时间内将firefox的市场份额迅速提高，他把flock浏览器称为“社会浏览器，”，让用户体验下一代浏览器的网络体验。他指出： “网络已由一个单纯的图书馆演变为集图书馆、超级市场和社区空间为一身的综合性场所，用户在网络让可以交流信息、相互通讯等。”

　11月25日，Bart Decrem作客博客网，就Flock这一新锐浏览器的发展和网友交流，以下为访谈实录：

嘉宾主持文心：今天非常高兴能够邀请到Flock浏览器的CEOBart Decrem先生来到博客网访问，他今天是第二次来中国，也是博客网和Flock经常交流的商务访问，我们很高兴他的到来，Bart Decrem先生在美国火狐浏览器的Mozilla基金会工作，他在去年成功在网络上进行火狐浏览器的营销，这次营销案例也成为浏览器市场上令人津津乐道的故事，Bart Decrem离开Mozilla基金会之后，和朋友一起成立另外一家Flock公司，也是做浏览器的项目，他们做新公司提出新的口号叫社会化浏览器，今天邀请Bart先生过来，是谈一下社会化浏览器的远景以及公司的情况。

Bart Decrem：我大部分时间在职业生涯里面都是做一些开源项目，在2000年成立一家公司，并且在2001年去了韩国，在韩国呆了一年半，加入Linux 公司工作，后来加入Mozilla基金会，从事火狐浏览器的发展，之后成立了Flock公司。在Mozilla基金会工作的时候主要负责市场和商业两方面，在商业方面，去年Firefox有一个非常骄人的成绩，领导的团队把火狐浏览器市场份额0.8％做到现在接近6％。与此同时在Firefox整个市场营销的过程中起了非常关键的作用，有一些津津乐道的网络营销的案例。之后在火狐浏览器成功推出之后，也帮助公司推出一年以后达到1亿产品下载量的规模。

嘉宾主持文心：在整个浏览器过去五、六年历史里面只有火狐浏览器去年从微软手中抢到了份额，从市场占有率0.8％，到取得5％－6％的成绩，这样的成绩取得原因是什么？

Bart Decrem：这是因为我们有很好的团队，通过用户相传这个很好的产品，用户可以看到在互联网新的应用，除了IE有新的浏览器，这浏览器可以更好更方便的使用。

嘉宾主持文心：你考虑哪些关键点使Firefox浏览器在市场上取得骄人的成绩。

Bart Decrem：在很长一段时间里面，从开源项目，从Mozilla浏览器出现，到Mozilla基金会成立，很多人全心投入产品开发里面，使得 Firefox浏览器成为很好的产品。更关键的是用户之间建立信任关系，不但因为这个浏览器可以防止弹出窗口，同时让用户感到非常安全的网络体验。

嘉宾主持文心：我们在新的互联网2.0时代的到来，现在越来越多的公司，越来越多博客谈用户体验，为什么用户体验会成为公司成功的关键点？

Bart Decrem：我们现在已经从一个由技术创新的时代到了用户体验创新的时代，而Flock公司并不是一家技术的公司，把公司定义为用户体验为主导的公司，最主要做的工作就是为用户带来最好的体验创新。

第二个原因，Flock和火狐产品不同，火狐浏览器还是延续原来的用户体验，作为用户体验也是基于前一代互联网技术的用户体验，并没有革命性的改变，对于Flock产品来说，在很好用户体验的基础之上，强调了跟用户的交互感，并且把现在各种在Web 2.0时代出现的各种服务，比如包括博客网提供的博客服务，博采功能，还有图片功能等等整合在浏览器之中。

嘉宾主持文心：为什么Bart会成立一个新的创业公司做Flock项目？

Bart Decrem：首先Firefox有非常好的技术，但还是延续网景公司出来整个的用户习惯，是比较传统的互联网时期。现在有更多新型的运用，现在还有新型的理念，包括参与经济，还有希望把Flock建成双向沟通的工具，让用户跟Web服务真正有一个联通性，连接度，同时有一个非常好的沟通渠道来非常自由的建立自己的内容，建立自己的创造。

离开Mozilla基金会是在去年11月份，之后和朋友成立另外一家公司，当时想帮助Firefox浏览器建立更多的插键，当时把新的想法和投资人进行了接触，投资人觉得是非常有意思的想法，通过API把跟浏览器的通道打通，这得到投资人的支持，拿到第一笔钱，Flock公司成立是今年七月份，现在 Flock也是非常有影响的公司。

嘉宾主持文心：因为在年初拿到第一笔种子基金，之后又进行第二笔成功的融资，你们如何说服投资人拿到第二笔投资的？

Bart Decrem：实际上在整个融资过程中，最主要是创新的精神，而这种创新不但基于技术的创新，而且更重要是基于对用户体验的创新，这种创新也使得投资者非常有信心进行第二轮投资。

嘉宾主持文心：你是如何看从现在开始到两年之后Flock是怎样的情况？

Bart Decrem：实际上整体来说Flock最终目的就是帮助各种各样的新型网络应用，包括博客、以及未来很多视频的东西，让用户更好用它，同时希望这个浏览器可以更好服务于现在的服务，比如博客网，或者其他的一些Web 2.0时代的服务公司，通过Flock可以建立一个更好的工具给用户，用户可以更好使用，可以享受更好的用户体验和服务质量。从整个趋势来看，是以用户为中心的趋势，实际上博客网这样的公司正是提供以用户为中心的网络服务型公司，为用户提供各种各样的服务，对Flock来讲更愿意帮助博客网这样的公司可以更好的建立一个工具，让用户更好的使用，围绕着用户把个更多的服务呈现给现在的用户。更多的可以帮助把注意力从大公司转移到用户身上，真正考虑用户的感受，真正使用户从新型的服务中受益。

嘉宾主持文心：你们现在对Flock这个项目，在功能上面包括想法上面，包括各种各样的应用上面，下一步看到什么？本身已经通过Flock可以和社会性书签联系在一起，同时有图片分享服务，也支持主要的几种博客发布的标准。

Bart Decrem：在现阶段还是在Bate版本的测试期，想完善一些功能，同时一月份帮助博客网推出基于博客网的Flock浏览器，浏览器的名字还不太清楚，这浏览器可以实现非常强大的功能，可以和博客网各种服务结合起来，包括我们提供的Blog服务，博采服务，以及图片博客等等功能。这对博客网来说也是一个非常好的促进。

嘉宾主持文心：你喜欢北京吗？

Bart Decrem：非常喜欢。在这边工作太辛苦，星期天可以去天安门故宫好好看看。

我感到非常兴奋的事情，我是来自欧洲，后来从欧洲搬到加州，后来发现加州所有事情比欧洲快了三倍，后来慢慢融入了加州的生活，这之后用了一年半的时间在韩国，在韩国的生活比美国的生活还要快三倍，当我适应了韩国的生活后，我来到北京之后，原来在北京的人比韩国的人还要快三倍，工作的效率和速度更快，使我有很多的能量以及看到很多兴奋点。特别在中国互联网用户群体里面，包括亚洲用户群体，包括博客各种各样的使用用户中间，大家都是关心人，都是以人为本的在使用，用户和用户之间都是谈论很人性化的话题，原来现在在中国也好在美国也好在全世界都产生联通性很强的、相关性很强的趋势，这趋势不管人和人之间，技术和人之间都倾向于以人为本，用户和用户之间说自己喜欢的东西，特别博客网现在的用户人群中，还有博客网用户写的内容感到非常惊讶，以及中国下一代Web 2.0用户的创造力和激情。同时感到最好的就是在北京天气非常好，好得和加州一样。

嘉宾主持文心：非常感谢Bart可以来到中国，同时把美国最好的技术和以用户为体验的概念带到中国，很荣幸博客网有机会和Flock合作，为用户更好的体验。

Bart Decrem：希望在下一次来访谈的时候，希望介绍Flock中文版的产品和博客网结合的产品。

嘉宾主持文心：非常感谢Bart。

Bart Decrem：谢谢！

---

如果还不了解css属性选择器，先搜索以前的文章来看，这几个属性选择器写得挺有意思。

提示abbr

abbr[title] {

color: #666;

border-bottom: 1px dotted #666;

}

abbr[title]:hover {

border-bottom-style: solid;

cursor: help;

}

隐藏468×60的图片

img[width="468"][height="60"],

img[width="468px"][height="60px"] {

display: none !important;

}

所有468×60的元素都隐藏

*[width="468"][height="60"], *[width="468px"][height="60px"] {

display: none !important;

}

控制input样式

input[type='text'] { } or input[type='submit']

Instead with the little help of JavaScript I have it just append the type it is as a className to itself…this way we could, at the least, do this:

为了ie，改成class，然后拿javascript遍历

input.text { }

input.submit { }

链接内容说明

a[href^=mailto]:after { content: ”(Email)”; }

a[href$=.pdf]:after { content: ”(PDF)”; }

via The Attribute Selector for Fun and (no ad) Profit

via Auto-Selecting Navigation，其实前几天在 sitepoint 就看了第10条正是这个技巧。

这样的好处是，所有页面导航部分的代码一模一样，容易修改和维护。样式表中通过 body id=”XXX” 来控制当前页面链接的样式。代码如下：

…

样式表如下：

body.home #navigation li.home,

body.about #navigation li.about,

body.work #navigation li.work,

body.products #navigation li.products,

body.contact #navigation li.contact{

… whatever styles you need to show the tab selected …

}

关于导航中为什么使用 span，可以参看这篇文章 Centered Tabs with CSS，主要是为了让字数不统一的菜单也能使用倒角效果，最终效果在这里，看了就明白了。