前言：
半途出家做Front End，以前只是大概知道点，现在就必须从头把css好好看看啦，呜呜~~~~~~
一、基本选择器
| 序号 | 选择器 | 含义 |
| 1. | * | 通用元素选择器，匹配任何元素 |
| 2. | E | 标签选择器，匹配所有使用E标签的元素 |
| 3. | .info | class选择器，匹配所有class属性中包含info的元素 |
| 4. | #footer | id选择器，匹配所有id属性等于footer的元素 |
二、多元素的组合选择器
| 序号 | 选择器 | 含义 |
| 5. | E,F | 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 |
| 6. | E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 |
| 7. | E > F | 子元素选择器，匹配所有E元素的子元素F |
| 8. | E + F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F |
1. 后代选择器（descendant selector）又称为包含选择器
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。
如：E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中：
每个空格结合符 可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
如，h1 em 选择器可以解释为 “作为 h1 元素后代的所有em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。
<html> <head> <style type="text/css"> h1 em {color:red;} </style> </head> <body> <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> </body> </html>
注：两个元素之间的层次间隔可以是无限的，如ul em。
<ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul>
所有浏览器都支的后代选择器
2.子元素选择器（Child selectors）只能选择作为某元素子元素的元素
后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 > strong {color:red;} </style> </head> <body> <h1>This is <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>
IE6不支持子元素选择器
3. 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
<!DOCTYPE HTML> <html> <head> <style type="text/css"> li + li {font-weight:bold;} </style> </head> <body> <div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div> </body> </html>
IE6不支持相邻元素选择器
四、属性选择器
CSS 2.1 属性选择器
| 序号 | 选择器 | 含义 |
| 9. | E[att] | 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） |
| 10. | E[att=val] | 匹配所有att属性等于“val”的E元素 |
| 11. | E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 |
| 12. | E[att|=val] | 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等 |
CSS 2.1中的伪类
| 序号 | 选择器 | 含义 |
| 13. | E:first-child | 匹配父元素的第一个子元素(必须声明 <!DOCTYPE>， :first-child 才能在 IE 中生效。) |
| 14. | E:link | 匹配所有未被点击的链接 |
| 15. | E:visited | 匹配所有已被点击的链接 |
| 16. | E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| 17. | E:hover | 匹配鼠标悬停其上的E元素 |
| 18. | E:focus | 匹配获得当前焦点的E元素 |
| 19. | E:lang(c) | 匹配lang属性等于c的E元素 |
CSS 2.1中的伪元素
| 序号 | 选择器 | 含义 |
| 20. | E:first-line | 匹配E元素的第一行(只能用于块级元素,可用在font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear) |
| 21. | E:first-letter | 匹配E元素的第一个字母(只能用于块级元素,可用在font，color，background，margin，padding，border，text-decoration，vertical-align (仅当 float 为 none 时)，text-transform，line-height，float，clear) |
| 22. | E:before | 在E元素之前插入生成的内容 |
| 23. | E:after | 在E元素之后插入生成的内容 |
CSS 3的同级元素通用选择器
| 序号 | 选择器 | 含义 |
| 24. | E ~ F | 匹配任何在E元素之后的同级F元素 |
CSS 3 属性选择器
| 序号 | 选择器 | 含义 |
| 25. | E[att^=”val”] | 属性att的值以"val"开头的元素 |
| 26. | E[att$=”val”] | 属性att的值以"val"结尾的元素 |
| 27. | E[att*=”val”] | 属性att的值包含"val"字符串的元素 |
CSS 3中与用户界面有关的伪类
| 序号 | 选择器 | 含义 |
| 28. | E:enabled | 匹配表单中激活的元素 |
| 29. | E:disabled | 匹配表单中禁用的元素 |
| 30. | E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 |
| 31. | E::selection | 匹配用户当前选中的元素 |
CSS 3中的结构性伪类
| 序号 | 选择器 | 含义 |
| 32. | E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| 33. | E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| 34. | E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| 35. | E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| 36. | E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| 37. | E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| 38. | E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| 39. | E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| 40. | E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| 41. | E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| 42. | E:empty | 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 |
CSS 3的反选伪类
| 序号 | 选择器 | 含义 |
| 43. | E:not(s) | 匹配不符合当前选择器的任何元素 |
CSS 3中的 :target 伪类
| 序号 | 选择器 | 含义 |
| 44. | E:target | 匹配文档中特定"id"点击后的效果 |
请参看HTML DOG上关于该选择器的详细解释和实例。
1、简单属性选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title] { color:red; } </style> </head> <body> <h1>可以应用样式：</h1> <h2 title="Hello world">Hello world</h2> <a title="W3School" href="http://w3school.com.cn">W3School</a> <hr /> <h1>无法应用样式：</h1> <h2>Hello world</h2> <a href="http://w3school.com.cn">W3School</a> </body> </html>
例子 1：可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> a[href][title]{color:red;} </style> </head> <body> <h1>可以应用样式：</h1> <a title="W3School Home" href="http://w3school.com.cn">W3School</a> <hr /> <h1>无法应用样式：</h1> <a href="http://w3school.com.cn">W3School</a> </body> </html>
例子 2：可以采用一些创造性的方法使用这个特性。例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> img[alt]{border: 5px solid red;} </style> </head> <body> <h1>可以应用样式：</h1> <img src="/i/w3school_logo_black.gif" alt="W3School Logo" /> <hr /> <h1>无法应用样式：</h1> <img src="/i/w3school_logo_black.gif" /> </body> </html>
例子 3：为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：
planet[moons] {color:red;}
这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
2、根据具体属性值选择： 使用 "=" 符号
可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：
<a href="http://www.w3school.com.cn/" title="W3School">W3School</a> <a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a> <a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>
例子 4：设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; } </style> </head> <body> <form name="input" action="" method="get"> <input type="text" name="Name" value="Bill" size="20"> <input type="text" name="Name" value="Gates" size="20"> <input type="button" value="Example Button"> </form> </body> </html>
请注意，这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。
3、根据部分属性值选择
| 类型 | 描述 |
|---|---|
| [abc~="def"] | 选择 abc 属性值包含 "def" 所有元素 |
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
| [abc|="def"] | 选择 abc 属性值中等于 def 或以 def- 开头的所有元素 |
例子 5：如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p[class~="important"] {color: red;} </style> </head> <body> <h1>可以应用样式：</h1> <p class="important warning">This is a paragraph.</a> <p class="important">This is a paragraph.</a> <hr /> <h1>无法应用样式：</h1> <p class="warning">This is a paragraph.</a> </body> </html>
如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p["important"] 应用到 HTML 文档时是等价的。
那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> img[title~="Figure"]{border: 1px solid gray;} </style> </head> <body> <h1>可以应用样式：</h1> <img title="Figure 1" src="/i/figure-1.gif" /> <img title="Figure 2" src="/i/figure-2.gif" /> <hr /> <h1>无法应用样式：</h1> <img src="/i/figure-1.gif" /> <img src="/i/figure-2.gif" /> </body> </html>
例子 5：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> a[href*="w3school.com.cn"]{color: red;} </style> </head> <body> <h1>可以应用样式：</h1> <a href="http://www.w3school.com.cn/">W3School</a> <a href="http://www.w3school.com.cn/css/">CSS</a> <a href="http://www.w3school.com.cn/html/">HTML</a> <hr /> <h1>无法应用样式：</h1> <a href="http://www.w3c.org/">W3C</a> <a href="http://www.microsoft.com">Microsoft</a> <a href="http://www.apple.com.cn">Apple</a> </body> </html>
例子 6：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> *[lang|="en"] {color: blue;} { color: red; } </style> </head> <body> <h1>可以应用样式：</h1> <p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <hr /> <h1>无法应用样式：</h1> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> </body> </html>
例子 7：
一般来说，[att|="val"] 可以用于任何属性及其值。
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> img[src|="/i/figure"] {border: 1px solid gray;} {border: 1px solid gray;} </style> </head> <body> <h1>可以应用样式：</h1> <img title="Figure 1" src="/i/figure-1.gif" /> <img title="Figure 2" src="/i/figure-2.gif" /> <hr /> <h1>无法应用样式：</h1> <img src="/i/eg_w3school.gif" /> </body> </html>
当然，这种属性选择器最常见的用途还是匹配语言值。
高效CSS选择符的关键
最右边有限 CSS选择符是从右到左进行匹配，例如#id > p 这样的选择符，浏览器是先遍历页面上每个p元素并确定其父元素的id。后代选择符#id a也是同样的原理，开销非常大。
Safari和WebKit的架构师 David Hyatt 在一篇《Writing Efficient CSS for use in the Mozilla UI》（《在Mozilla UI中编写搞笑的CSS》）文章中揭示了这些内容，在有关CSS选择符性能的文章中，这篇是被引用次数最多的文章之一：
样式系统从最右边的选择符开始向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
理解了选择符从右到左的匹配之后，我们就可以从另一个角度看CSS选择符，并将其调整得更高效。解析来继续了解 David Hyatt 提供的编写搞笑选择符指南：
避免使用通配规则 除了传统意义上的通配选择符 * ，相邻兄弟元素选择符、子选择符、后代选择符、属性选择符都归纳到“通配规则”分类下。推荐仅使用id、类、标签选择符。
不要限制ID选择符 div#id 简化为#id
不要限制类选择符 li.chapter 改写为.li-chapter 或者 .list-chapter
让规则越具体越好 不要试图编写像“ol li a”这样的长选择符，最好创建像.list-anchor一样的类
避免使用后代选择符 通常处理后代选择符的开销是最高的，而是用子选择符也可以得到想要的效果，并且更高效。
避免使用标签————子选择符 如果有像”#id>li>a”这样基于标签的子选择符，那么应该使用一个类来关联每个标签元素，如.list-anchor
质疑子选择符的所有用途 检查所有使用子选择符的地方，尽可能用具体的类取代他们
依靠继承 了解哪些属性可以通过继承而来，避免对这些属性重复指定规则。
CSS选择符的性能
复杂的选择符影响性能 大量低效的CSS选择符会对性能产生负面影响。
重心在关键选择符上 从右到左匹配，关键选择符在最右边。