The CSS3 Selectors

Posted in 次世代前端技术 on 09月 29th, 2009 by snaked – Be the first to comment

CSS3也许早就不是什么新鲜的话题,但对于目前的“主流浏览器”来说……还是个新得要命的东西
CSS3虽然没有在根本上改变或延展样式表的本质功能与用途,但对于前端开发者来说……这叫做“标准”的玩意“万一”推广开来,可是能减少大量开发时间跟疲劳度,没错,就是代码民工们一直在追求的write less & do more。更重要的是,对很多人来说(抱歉,不小心令很多人被代表了,在这里向很多人表示歉意)在原有基础上学习一个新的标准是一个非常有趣,非常猎奇的体验(谁跟你一样这么病态),正如很多人的都不怕折腾,只要折腾的过程很有趣(都是内啡肽在作怪)。
(咳咳……抱歉,说了一大堆与题目无关的废话)
从现在开始,本文从娱乐时间进入技术时间,但这个技术的层次只是面向初学者或对html5及css3感兴趣的人,顺便帮自己做个笔记,大牛们请自行Crtl+W(big niu:怎么到现在才说,浪费别人很多时间啊)

CSS翻来覆去无非只是选择器(selector)与样式(style)这两个玩意,选择什么元素,配以什么样式,CSS3的改进也无非在这两方面

更灵活的元素选择器
更丰富的样式规则

这样一来就减少了大量的代码熵

先简单介绍下CSS3的选择器
资料(英文)采集自http://www.w3.org/TR/css3-selectors/
自己乱译的,献丑了:
前注:高亮背景行为CSS3新增选择器

符号 简单样板 样板解释 分类描述 首次定义的CSS版本
* * 匹配任意类型元素 通配选择符 2
E E 匹配类型为E的元素 类型选择符 1
[属性] E[foo] 匹配包含一个”foo”属性的E元素 属性选择符 2
[属性="字符串"] E[foo="bar"] 匹配”foo”属性的值完全匹配字串”bar”的E元素 属性选择符 2
[属性~="字符串"] E[foo~="bar"] 匹配E元素,且其”foo”属性的有一系列被空格分隔的值,其中一个值完全匹配字串”bar” 属性选择符 2
[属性^="字符串"] E[foo^="bar"] 匹配E元素,且其”foo”属性的值以字符串”bar”起始 属性选择符 3
[属性$="字符串"] E[foo$="bar"] 匹配E元素,且其”foo”属性的值以字符串”bar”结束 属性选择符 3
[属性*="字符串"] E[foo*="bar"] 匹配E元素,且其”foo”属性的值中包含字串”bar” 属性选择符 3
[属性|="字符串"] E[foo|="en"] 匹配E元素,且其”foo”属性的值为一系列连字符(短横)分隔的值,且以字串”en”起始(从左开始) 属性选择符 2
:root E:root 匹配位于文档(document)根部的E元素 结构伪类 3
:nth-child() E:nth-child(n) 匹配E元素,且其为其父元素的第n个子元素 结构伪类 3
:nth-last-child() E:nth-last-child(n) 匹配E元素,且其为其父元素的倒数第n个子元素 结构伪类 3
:nth-of-type() E:nth-of-type(n) 匹配E元素,且位于兄弟(同级)的E元素中的第n位 结构伪类 3
:nth-last-of-type() E:nth-last-of-type(n) 匹配E元素,且位于兄弟(同级)的E元素中的倒数第n位 结构伪类 3
:first-child E:first-child 匹配E元素,且为其父元素的首位子元素 结构伪类 2
:last-child E:last-child 匹配E元素,且为其父元素的最后一位子元素 结构伪类 3
:first-of-type E:first-of-type 匹配E元素,且位于兄弟(同级)的E元素中的首位 结构伪类 3
:last-of-type E:last-of-type 匹配E元素,且位于兄弟(同级)的E元素中的倒数第一位 结构伪类 3
:only-child E:only-child 匹配E元素,且为其父元素的唯一子元素(无兄弟元素) 结构伪类 3
:only-of-type E:only-of-type 匹配E元素,且为其兄弟(同级)元素中唯一的E元素 结构伪类 3
:empty E:empty 匹配无子元素的E元素 (可包含文本节点) 结构伪类 3
:link
:visited
E:link
E:visited
匹配E元素,其为超链接的锚(anchor),且其指向的目标(target) 还没被浏览 (:link) 或已浏览过了 (:visited) link 伪类 1
:active
:hover
:focus
E:active
E:hover
E:focus
匹配处于各种用户行为中的E元素 用户行为伪类 1 and 2
:target E:target 匹配是URI所指向的目标(target)的E元素 target 伪类 3
:lang() E:lang(fr) 匹配语言为”fr”的E元素 (语言由文档语句定义) :lang() 伪类 2
:enabled
:disabled
E:enabled
E:disabled
匹配状态为激活(enabled)或禁用(disabled)的用户界面元素E UI元素状态伪类 3
:checked E:checked 匹配状态为勾选(checked)的用户界面元素E(如:单选钮 或 复选框) UI元素状态伪类 3
::first-line E::first-line 匹配E元素编排格式中的第一行 ::first-line 伪元素 1
::first-letter E::first-letter 匹配E元素编排格式中的第一个字母(字符) ::first-letter 伪元素 1
::before E::before 匹配先于E元素生成的内容 ::before 伪元素 2
::after E::after 匹配生成于E元素之后的内容 ::after 伪元素 2
. E.warning 匹配class属性值为”warning”的E元素 (class由文档语句定义). Class选择符 1
# E#myid 匹配ID值为”myid”的E元素 ID选择符 1
:not() E:not(s) 匹配不符合简单选择符 s 的E元素 反向选择符 3
空格 E F 匹配E元素的后代元素(子、孙等)中的F元素 派生连接符 1
> E > F 匹配E元素的子元素中的F元素 子元素连接符 2
+ E + F 匹配紧靠着前方的兄弟元素E登场的F元素 临接兄弟连接符 2
~ E ~ F 匹配F元素,前方有先登场的兄弟元素E 普通兄弟连接符 3

名词解释(个人的理解方式):
伪类(pseudo-class):用于选定元素的一种特殊的属性选择符,但这个属性不是该元素节点本身的DOM属性,而是跟上下文或用户行为有关的特殊属性
伪元素(pseudo-element):不是选定DOM树中的某个具体元素,而是以通过描述其与某个元素的特定关系来映射出对应的虚拟元素,并选定该虚拟元素

这样一来选择器基本上搞清个大概了,但上面的样本都是极其简单的例子,各种选择符或连接符可以相互组合,构建出更复杂的选择器。
打这么点字就觉得手懒了,看来是最近太少写书面语了,暂时先到这了,以后再慢慢介绍其它次世代前端技术。

适用于Mtime的VeryCD资源侧栏

Posted in 未分类 on 09月 16th, 2009 by snaked – Be the first to comment

用意很明显了,就是为了节约时间,提高资源的聚合度,增加浏览体验……

一些代码参考了SurfChen的VeryDou脚本

资源排列方式跟在VC中搜索的默认排序一样,显示前十个相关资源(如果有的话),样式尽量套用了Mtime的侧栏样式,看上去不至于太突兀(自我感觉)

要求:Firefox浏览器及安装GreaseMonkey扩展

脚本传送门:

http://userscripts.org/scripts/show/57858

无设置项,安装后直接生效,在浏览Mtime的影片介绍页时自动激活

[转]被误传的经典名言

Posted in 无从考证 on 08月 5th, 2009 by snaked – Be the first to comment

2006年1月14日,美国有线电视新闻网在报道伊朗总统艾哈迈迪-内贾德讲话时,出现严重的翻译错误。将他所说的“伊朗拥有和平利用核能的权利,这样的权利是不可剥夺的”和“我们国家不需要核武器”误译成“拥有核武器是伊朗不可剥夺的权利”,在国际上引起轩然大波。结果,伊朗很生气,后果很严重。CNN不仅要向伊朗道歉,还将被禁止继续在伊朗从事新闻活动。
实际上,一直以来,有很多的名人名言都因为各种原因被我们或错误解读,或断章取义,而这些已经被曲解的“名言”却借助大众传媒迅速传播,成为我们心中颠扑不破的真理。以下便是比较经典的几句误传名言。

误传一:天才是1%的灵感加上99%的汗水  ——爱迪生

真相:天才就是1%的灵感加上99%的汗水,但那1%的灵感是最重要的,甚至比那99%的汗水都要重要。

详解:
从小到大,老师都会用爱迪生的这句话教导我们好好学习,天天向上。现在才知道,虽然伟大的发明家爱迪生确实说过“天才那就是1%的灵感加上99%的汗水”这句话,但是,我们的老师和教材偏偏每次都漏掉爱迪生后面那关键的一句话:“但那1%的灵感是最重要的,甚至比那99%的汗水都要重要”。

爱迪生:1%的灵感才是最重要的

误传二:不存在一个掷色子的上帝  ——爱因斯坦

真相:上帝不掷色子

详解:
爱因斯坦曾经说过:“上帝不掷色子。”他这句话是针对量子物理而说的。量子物理中有一条非常重要的测不准原理,它彻底打破了“决定论”的物理学,而爱因斯坦恰恰是支持决定论的,这与爱因斯坦的宗教信仰有关。爱因斯坦并不是一个狂热的信徒,但他始终相信上帝的存在(不一定是某个宗教的上帝),他认为量子力学的不确定性观念就好象上帝掷色子一样不可相信。这是他的本来意思。
那么,现在让我们看看,我们的教材是怎样篡改爱因斯坦的话的——绝对令你目瞪口呆。教材说:“爱因斯坦反对量子物理,是因为爱因斯坦觉得量子物理学家承认有一个掷色子的上帝存在,不是一个真正的唯物主义者。”

爱因斯坦:我说的是“上帝不掷色子”

误传三:中国是一只睡狮,一旦它醒来,整个世界都会为之颤抖  ——拿破仑

真相:“中国是一只睡狮,一旦它醒来,整个世界都会为之颤抖。……它在沉睡着,谢谢上帝,让它睡下去吧!

详解:
“中国是一只睡狮,一旦它醒来,整个世界都会为之颤抖。”谁都知道这是拿破仑说过的一句话,我们接受这句话,是因为一个伟大的外国人对中国有如此崇高的评价,作为一个中国人,我们深感自豪。而我们也深信这只睡狮已经醒来,已经让世界感到它带来的颤抖,因为中国人民已经站起来了,已经当惊世界殊了。但是我们很长一段时间不知道这句话的中间还有一句:“它在沉睡着,谢谢上帝,让它睡下去吧”。

拿破仑:让睡狮继续睡下去吧?

误传四:我们在错误的时间,错误的地点,同错误的对手打了一场错误的战争  ——布莱德利

真相:“如果我们把战争扩大到GCD中国,那我们就会被卷入错误的时间、错误的地点同错误的对手打一场错误的战争”

详解:
我们过去知道的是美帝国主义侵略朝鲜,而中国人民志愿军则是一举打败了武装到牙齿的美军,取得了一个伟大的胜利。我们是第一个让美国人在没有取得胜利的情况下签署了停战协定,大灭了美帝气焰,大长了人民威风,连美国人也如是说,这句话就是明证。但是,布莱德利说的这段话却是有前提的:“如果我们把战争扩大到GCD中国,那我们就会被卷入错误的时间、错误的地点同错误的对手打一场错误的战争”。

布莱德利:我的话是有前提的

误传五:存在即合理  ——黑格尔

真相:“凡是合乎理性的东西都是现实的, 凡是现实的东西都是合乎理性的。

详解:
“存在即合理”,黑格尔的这句“至理名言”几乎连小学生都耳熟能详。许多人为之困惑,却不求甚解,认为黑格尔这句话意思是说:凡是存在的事物就天然具有合理性,“存在”是“合理”(价值判断)的必要充分条件。
殊不知,这种误解大概来自旧版本黑格尔著作翻译者的谬误。如果没记错的话,前年看过的《小逻辑》以及《法哲学》里,译文是: “凡是合乎理性的东西都是现实的, 凡是现实的东西都是合乎理性的。”

黑格尔:凡是合乎理性的东西都是现实的, 凡是现实的东西都是合乎理性的

误传六:民可使由之,不可使知之  ——孔子

真相:“子曰:民可,使由之;不可,使知之。

详解:
这句名言出自《论语·秦伯》中的“子曰民可使由之不可使知之”,如果表述成“子曰:民可使由之,不可使知之”,则是宣扬愚民权术的名言。
《论语》主要是记载孔子的语录,上下文之间往往没有多少联系。当时的文章,除了句断,其它标点符号还没有发明。所以,被误读是可能发生的事。
如将这句话更正为“子曰:民可,使由之;不可,使知之。”则与孔子另一句名言“有教无类”一脉相承。也使得作为中国历史上第一位伟大的教育家孔子的形象跃然纸上。

孔子:你们把我的话断句断错了

PS:文章出处因年代久远,现已无从考证,若您是文章作者或知道作者是谁,请与我联系。

已保护:最近某梦见一只骑着羊驼的白衣使者

Posted in 折腾乐趣 on 08月 3rd, 2009 by snaked – 输入密码以查看评论

这篇文章已被密码保护。请在这里输入密码: