重学prototype，半道研究了一下css2.1和css3的选择器，整理整理：
CSS 2.1
1. 通用选择器(Universal selector)
即星号”*”，匹配任何元素类型
2. 类型选择器(Type selectors)
h1 {font-size:19px;} /*匹配文档中所有的h1元素*/
3. 后代选择器(Descendant selectors)
<h1>I <span>am <em>boke.</em></span></h1>
h1 em {color:blue} /*匹配h1中的em元素*/
4. 子选择器(Child selectors)
<h1>I <span>am <em>boke.</em></span></h1>
span > em {color:blue} /*匹配span中的em元素。子选择器只对儿子辈的可用，对孙子、重孙子辈等都不可用，如h1 em{color:blue}将不起作用*/
5. 相邻兄弟选择器(Adjacent sibling selectors)
<span class=”abc”>I am Peter Petrelli.</span>
<h1>I am boke.</h1>
<span class=”abc”>I am Sylar.</span>
h1 + .abc {color:blue} /*匹配与h1紧邻的后一个，类名为abc的元素。注意是后一个，“I am Peter Petrelli”是不会变蓝的。*/
6. 属性选择器(Attribute selectors)
<span lang=”zh-cn” title=”heroes the 4400″>Super men?</span>
- span[title] {color:red;} /*匹配含有title属性的span*/
- span[title="heroes the 4400"] {color:red;} /*匹配title属性的值为“heroes the 4400”的span*/
- span[title~="heroes"] {color:red;} /*匹配title属性中含有以空格分隔的，单词为“heroes”的span*/
- span[lang|="zh"] {color:blue;} /*匹配lang属性中含有连字符且以“zh”开头的span*/
7. 类选择器和ID选择器(Class selectors and ID selectors)
不必多言。
8. 伪类
<div><p>I am boke.</p><p>I am Hiro Makamura.</p><a href=”">I am Matt Parkman.</a></div>
- :first-child 例如：div > p:first-child {color:red;} /*匹配div下的第一个p元素*/
- :link and :visited 例如a:link {color:blue;} /*匹配没有被访问的超链接*/ a:visited {color:yellow} /*匹配已经被用户点击的超链接*/
- :hover,:active and :focus 例如：.b:hover {color:blue;} /*匹配class=”b”的元素鼠标放上时*/ .b:active {color:red;} /*匹配class=”b”的元素鼠标按下时*/ .b:focus {color:yellow;} /*匹配class=”b”的元素得到焦点时*/
- :lang 例如：html:lang(zh-cn) {qutoes:’?’ ‘?’}
9. 伪元素
- :first-line 例如：p:first-line {font-size:3em;} /*匹配p元素内的第一行，注意，只作用于块元素，内联元素要设定height或width属性，或设定position为absolute，或设定display为block*/
- :first-letter 例如：p:first-letter{font-size;2em;} /*匹配p元素内的第一个字符，注意，同first-letter*/
- :before and :after 例如：p:before {content:”nani?”} /*设置在p之前发生的内容，注意要和content配合使用*/
CSS 3
2.1中有的不再重复，将标注 “² ”这个符号表示
1. 通用选择器(Universal selector)²
2. 类型选择器(Type selector)²
3. 属性选择器(Attribute selector)²
<a href=”" title=”copyright boke”>sa ku sha.</a>
- a[title]²
- a[title="copyright boke"]²
- a[title~="copyright"]²
- a[lang|="zh"]²
- a[title^="copy"] /*匹配有title属性且属性值以“copy”开头的a元素*/
- a[title$="ke"] /*匹配有title属性且属性值以“ke”结尾的a元素*/
- a[title*="right"] /*匹配有title属性且属性值中包含“right”字符串的a元素*/
4. 类选择器和ID选择器(Class selectors and ID selectors)²
5. 伪类(Pseudo-classes)
- 动态伪类(Dynamic pseduo-classes)
- :link and :visited²
- :hover, :active and :focus²
- 目标伪类(Target pseduo-class) :target /*简单理解成匹配被从URI中定位的锚点*/
- 语言伪类(Language pseudo-class)²
- UI元素状态伪类(UI element states pseudo-classes)
- :enabled and :disabled 例如：.urt:disabled {color:#333;} /*匹配类为.urt且被设置成不可用(disabled)的元素*/
- :checked /*匹配被设置成checked的元素*/
- :indeterminate /*匹配checked状态不确定的元素，CSS 3还没加入，将来可能加入*/
- 结构伪类(Structural pseudo-classes)
- :root /*匹配文档的根元素，在html 4 中这个总是匹配*/
- :nth-child() and nth-last-child() /*按索引值匹配子元素。例如：li:nth-child(3) 匹配在ul中排第3个位置的li，li:nth-child(2n+1)和li:nth-child(odd)匹配所有奇数位置的li，li:nth-child(2n)和li:nth-child(even)匹配所有偶数位置的li。当然4n+1，4n+2，4n+3，4n+4可以四行匹配，类推。注意，第一个元素的索引是1而不是0。倒数的:nth-child()*/
- :nth-of-type() and :nth-last-of-type() /*匹配某种类型的同级兄弟元素，括号里的参数同:nth-child()。倒数的:nth-of-type()*/
- :first-child and :last-child /*匹配第一个和最后一个元素，例如：ul li:first-child {color:red}*/
- :first-of-type and :last-of-type /*匹配第一个和最后一个某种类型的元素*/
- only-of-type /*匹配一个元素其在这个元素的父元素中再也没有和它同名的元素*/
- :empty /*例如，p:empty，匹配一个<p></p>*/
- 否定伪类(Negation pseudo-class) :not() /*匹配除了括号里规定的之外的元素，例如：button:not([disabled])，匹配除了属性设置为disabled之外的所有button，*:not(p)，匹配除了p元素之外的所有元素*/
6. 伪元素
- ::first-line² /*不过这里是两个“:”*/
- ::first-letter² /*不过这里是两个“:”*/
- ::selection /*匹配元素中被用户选中的部分，例如span::selection {color:red}*/
- ::before and ::after² /*两个“:”*/
7. 组合选择器
<div><p class=”god”>I am boke.</p><p>I am Isaac Mendez.</p><p>I am Nathan Petrelli.</p></div>
- 后代(Descendant combinator)² /*同2.1里的后代选择器，例如：div p {color:red;}*/
- 子代(Child combinators)² /*同2.1里的子选择器，例如div>p{color:blue;}*/
- 相邻兄弟(Adjacent sibling combinator)² /*同2.1里的相邻兄弟选择器，例如：.god+p{font-size:2em;}*/
- 通用兄弟(Genetal sibling combinator) /*可以选择普通的兄弟了，例如：.god~p{color:yellow;}*/
终于写完了，等发现那里有问题再改正。有种感觉，w3c那帮闲人弄这么多东西干嘛，实际应用中真的都会用到吗，想让css取代js吗？南哈蒙理工学院（=S H I T）！
过两天再整理个Mobile Profile的。