CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。
避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。
一、基本选择器
| 选择器 | 描述 | CSS版本 |
| E | 标签选择器，匹配所有使用E标签的元素 | |
| * | 通用元素选择器，匹配任何元素 | |
| .info | class选择器，匹配所有class属性中包含info的元素 | |
| #footer | id选择器，匹配所有id属性等于footer的元素 |
比如：
1 * { margin:0; padding:0; } 2 3 p { font-size:2em; } 4 5 .info { background:#ff0; } 6 7 p.info { background:#ff0; } 8 9 p.info.error { color:#900; font-weight:bold; } 10 11 p#info { background:#ff0; }
二、多元素的组合选择器
| 选择器 | 描述 | CSS版本 |
| E，F | 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开 | |
| E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | |
| E>F | 子元素选择器，匹配所有E元素的儿子元素F | |
| E+F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F | |
| E~F | 匹配任何E标签之后的同级F标签 | 3 |
比如：
1 div,p { color:#f00; } 2 #nav,li { display:inline; } 3 #nav a { font-weight:bold; } 4 div>strong { color:#f00; } 5 p+p { color:#f00; } 6 p~ul { color:#f00; }
1、并列选择器（E,F,G,...）
这类选择器之间用逗号作分割，能匹配选择器列出的所有标签元素。
2、后代选择器（E F; E>F）
E F,标签之间用空格隔开，表示匹配E标签内所有F标签，所匹配的F标签不仅仅是E标签的儿子，还有可能是E标签的孙子，或者曾孙、从孙等等。
E>F标签匹配所有为E标签儿子的F标签。
3、兄弟选择器（E+F；E~F）
E~F选择其中F标签无需紧紧跟随E标签后面第一个，如果需要实现这样的一个功能可以用E+F选择器。对于IE浏览器来说只有IE6以上的版本才支持该选择器。
三、属性选择器
| 选择器 | 描述 | CSS版本 |
| E[attribute] | 匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） | 2.1 |
| E[attribute=value] | 匹配所有attribute属性等于“value”的E元素 | 2.1 |
| E[attribute~=value] | 匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素 | 2.1 |
| E[attribute|=value] | 匹配这类E元素，它具有attribute属性的就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等 | 2.1 |
| E[attribute^=value] | 匹配所有attribute属性值是以“value”开始的E元素 | 3 |
| E[attribute$=value] | 匹配所有attribute属性值包含有“value”的E元素 | 3 |
| E[attribute*=value] | 匹配所有attribute属性值是以"value"结束的E元素 | 3 |
比如：
CSS
1 p[title] { color:#f00; } 2 3 div[class=error] { color:#f00; } 4 5 td[headers~=col1] { color:#f00; } 6 7 p[lang|=en] { color:#f00; } 8 9 blockquote[class=quote][cite] { color:#f00; } 10 11 div[id^="nav"] { background:#ff0; } 12 13 div[id$="nav"] { background:#ff0; } 14 15 16 a[href*=".jpg"] { 17 background: url(jpeg.gif) no-repeat left 50%; 18 padding: 2px 0 2px 20px; 19 } 20
四、伪类选择器
| 选择器 | 描述 | CSS版本 |
| E:first-child | 匹配父元素的第一个子元素E | 2.1 |
| E:link | 匹配所有未被点击的链接 | 2.1 |
| E:visited | 匹配所有已被点击的链接 | 2.1 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | 2.1 |
| E:hover | 匹配鼠标悬停其上的E元素 | 2.1 |
| E:focus | 匹配获得当前焦点的E元素 | 2.1 |
| E:lang(c) | 匹配lang属性等于c的E元素 | 2.1 |
| E:enabled | 匹配表单中激活的元素 | 3 |
| E:disabled | 匹配表单中禁用的元素 | 3 |
| E:checked | 匹配表单中被选中的radio或者checkbox元素 | 3 |
| E::selection | 匹配用户当前选中的元素 | 3 |
| E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 | 3 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，n从1开始计算 | 3 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 | 3 |
| E:nth-of-type(n) | 与:nth-child(n)作用类似，用作匹配使用同种标签的第n个元素 | 3 |
| E:nth-last-of-type | 与:nth-last-child作用类似，用作匹配同种标签的最后一个元素 | 3 |
| E:last-child | 匹配父元素的最后一个子元素，等同于E:nth-last-child(1) | 3 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个元素，等同于E:nth-of-type(1) | 3 |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个元素，等同于E:nth-last-of-type(1) | 3 |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于E:first-child:last-child或者E:nth-child(1):nth-last-child(1) | 3 |
| E:only-of-type | 匹配父元素下使用相同标签的唯一一个子元素，等同于E:first-of-type:last-of-type或者E:nth-of-type(1):nth-last-of-type(1) | 3 |
| E:empty | 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 | 3 |
| E:not(s) | 匹配不符合当前选择器的任何E标签元素 | 3 |
| E:target | 匹配文档中特定“id”点击后的效果 | 3 |
1、E:first-child
您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素（也就是第11行的p，不是strong元素）：
1 <html> 2 <head> 3 <style type="text/css"> 4 p:first-child 5 { 6 color: red; 7 } 8 </style> 9 </head> 10 <body> 11 <p>123123<strong>some text</strong></p> 12 <p>some text</p> 13 </body> 14 </html>
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。对于IE浏览器，必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE6+ 中生效。还有一个问题就是，有时候会创建一个aspx文件，如下：
HTML
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default21.aspx.cs" Inherits="Default21" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <style type="text/css"> 9 p:first-child 10 { 11 background-color:Red; 12 } 13 </style> 14 </head> 15 <body> 16 <form id="form1" runat="server"> 17 <p> 18 123123123123123123 19 </p> 20 </form> 21 </body> 22 </html>
运行起来发现字体颜色并不是红色，为什么呢？其实这个p不是第一个元素。我们可以查看一下页面运行起来后生成的Html，这样问题就清楚了。
HTML
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head><title> 6 7 </title> 8 <style type="text/css"> 9 p:first-child 10 { 11 background-color:Red; 12 } 13 </style> 14 </head> 15 <body> 16 <form name="form1" method="post" action="Default21.aspx" id="form1"> 17 <div> 18 <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZK7s3d9MopxNO2l9SJNVyVvw+Q5v" /> 19 </div> 20 21 <p> 22 123123123123123123 23 </p> 24 </form> 25 </body> 26 </html
2、动态伪类
所谓的动态伪类，是指它们并不存在HTML中，而是只有当用户和网站交互的时候才会呈现。E:link, E:visited, E:hover, E:active 和 E:focus都属于这类，前面四种又称之锚伪类。
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
动态伪类被所有的现代浏览器支持，甚至IE6。但是请注意，对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)，而且只有IE8才接受应用于非a标签的:active状态。
CSS
1 a:link {color: #FF0000} /* 未访问的链接 */ 2 a:visited {color: #00FF00} /* 已访问的链接 */ 3 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 4 a:active {color: #0000FF} /* 选定的链接 */ 5 input:hover {background-color: blue} /* 只有在IE6+或者Firefox上才起作用 */ 6 input:active {background-color: green} /* 只有在IE8或者Firefox上才起作用 */
3、:lang伪类
语言伪类:lang 使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
1 <html> 2 <head> 3 4 <style type="text/css"> 5 q:lang(no) 6 { 7 quotes: "~" "~" 8 } 9 </style> 10 11 </head> 12 13 <body> 14 <p>文字<q lang="no">段落中的引用的文字</q>文字</p> 15 </body></html>
4、UI元素状态伪类
有些HTML元素有enable 或disabled 状态(比如，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled或:checked 伪类来分别定位。
1 input:enabled 2 { 3 background-color:Red; 4 } 5 input:disabled 6 { 7 background-color:Yellow; 8 } 9 input[type="checkbox"]:checked { 10 margin-left: 15px; 11 }
这类型的选择除了IE浏览器不支持外，其他的浏览器都支持。
5、E::Selection
目前没有任何一款IE或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
1 div:selection 2 { 3 background-color:Green; 4 }
6、结构伪类选择器
这类选择器包括有E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type 和 E:empty。Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器支持这些选择器。
CSS
1 p:nth-child(3) { color:#f00; } 2 3 p:nth-child(odd) { color:#f00; } 4 5 p:nth-child(even) { color:#f00; } 6 7 p:nth-child(3n+0) { color:#f00; } 8 9 p:nth-child(3n) { color:#f00; } 10 11 tr:nth-child(2n+11) { background:#ff0; } 12 13 tr:nth-last-child(2) { background:#ff0; } 14 15 p:last-child { background:#ff0; } 16 17 p:only-child { background:#ff0; } 18 19 p:empty { background:#ff0; }
7、否定选择器
否定选择器:not()，可以让你定位不匹配该选择器的元素
比如，如果你需要定义表单元素中的input元素，但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：
1 input:not([type="submit"]) 2 { 3 width: 200px; 4 padding: 3px; 5 border: 1px solid #000000; 6 }
IE浏览器不支持这个选择器。
8、:target选择器
当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使用:target伪类来控制目标的样式。
举个例子，比如你有一个很长的使用了很多文字和h2标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。