The CSS3 Selectors
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树中的某个具体元素，而是以通过描述其与某个元素的特定关系来映射出对应的虚拟元素，并选定该虚拟元素
这样一来选择器基本上搞清个大概了，但上面的样本都是极其简单的例子，各种选择符或连接符可以相互组合，构建出更复杂的选择器。
打这么点字就觉得手懒了，看来是最近太少写书面语了，暂时先到这了，以后再慢慢介绍其它次世代前端技术。
snaked