30个最常用css选择器解析
你也许已经掌握了 id、class、后台选择器这些基本的 css 选择器。但这远远不是 css 的全部。下面向大家系统的解析 css 中 30 个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略 css 的巨大灵活性。
1. *
* {
margin: 0;
padding: 0;
}
星状选择符会在页面上的每一个元素上起作用。web 设计者经常用它将页面中所有元素的 margin 和 padding 设置为 0。 * 选择符也可以在子选择器中使用。
#container * {border: 1px solid black;}
上面的代码中会应用于 id 为 container 元素的所有子元素中。 除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container {
width: 960px;
margin: auto;
}
井号作用域有相应 id 的元素。id 是我们最常用的 css 选择器之一。id 选择器的优势是精准，高优先级（优先级基数为 100，远高于 class 的 10）， 作为 javascript 脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用 id 选择器前，我们最好问下自己，真的到了非用 id 选择 器的地步？ 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error {color: red;}
这是一个 class(类) 选择器。class 选择器与 id 选择器的不同是 class 选择器能作用于期望样式化的一组元素。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a {text-decoration: none;}
这也是我们最常用的一种选择器——后代选择器。用于选取 X 元素下子元素 Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有 的情况是不宜使用的，比如上述的代码去掉 li 下的所有 a 的下划线，但 li 里面还有个 ul，我不希望 ul 下的 li 的 a 去掉下划线。使用此后代选择器的时候要 考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为 li。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
5. X
a {color: red;}
ul {margin-left: 0;}
标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比 * 高。 兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
6. X:visited 和 X:link
a:link {color: red;}
a:visted {color: purple;}
使用:link 伪类作用于未点击过的链接标签。:hover 伪类作用于点击过的链接。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
7. X+Y
ul + p {color: red;}
相邻选择器，上述代码中就会匹配在 ul 后面的第一个 p，将段落内的文字颜色设置为红色。(只匹配第一个元素) 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
8. X>Y
div#container > ul {border: 1px solid black;}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
子选择器。与后代选择器 X Y 不同的是，子选择器只对 X 下的直接子级 Y 起作用。在上面的 css 和 html 例子中，div#container>ul 仅对 container 中最近一级的 ul 起作用。从理论上来讲 X > Y 是值得提倡选择器，可惜 IE6 不支持。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
9. X ~ Y
ul ~ p {color: red;}
相邻选择器，与前面提到的 X+Y 不同的是，X~Y 匹配与 X 相同级别的所有 Y 元素，而 X+Y 只匹配第一个。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
10. X[title]
a[title] {color: green;}
属性选择器。比如上述代码匹配的是带有 title 属性的链接元素。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
a[href="http://css9.net"] {color: #1f6053;}
属性选择器。 上面的代码匹配所有拥有 href 属性，且 href 为 http://css9.net 的所有链接。
这个功能很好，但是多少又有些局限。如果我们希望匹配 href 包含 css9.net 的所有链接该怎么做呢？看下一个选择器。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
12. X[title*="css9.net"]
a[href*="css9.net"] {color: #1f6053;}
属性选择器。正如我们想要的，上面代码匹配的是 href 中包含 "css9.net" 的所有链接。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
13. X[href^="http"]
a[href^="http"] {background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
属性选择器。上面代码匹配的是 href 中所有以 http 开头的链接。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
13. X[href$=".jpg"]
a[href^="http"] {background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
属性选择器。在属性选择器中使用 $，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg 图片的链接。（注意，这里仅仅是.jpg 图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
14. X[data-*="foo"]
在上一个选择器中提到如何匹配所有图片链接。如果使用 X[href$=".jpg"] 实现，需要这样做：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {color: red;}
看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’
html 代码
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css 代码如下：
a[data-filetype="image"] {color: red;}
这样所有链接到图片的链接字体颜色为红色。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：
html 代码
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css 代码
a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
在上面例子中，匹配 data-info 属性中包含“external”链接的字体颜色为红色。匹配 data-info 属性中包含“image”的链接设置黑色边框。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked 伪类用来匹配处于选定状态的界面元素，如 radio、checkbox。
input[type=radio]:checked {border: 1px solid black;}
上面代码中匹配的是所有处于选定状态的单选 radio，设置 1px 的黑色边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
18. X:after 和 X:before
这两个伪类与 content 结合用于在元素的前面或者后面追加内容，看一个简单的例子：
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在 h1 标题的后面显示一张图片。
我们也经常用它来实现清除浮动，写法如下：
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
19. X:hover
div:hover {background: #e3e3e3;}
:hover 伪类设定当鼠标划过时元素的样式。上面代码中设定了 div 划过时的背景色。
需要注意的是，在 ie 6 中，:hover 只能用于链接元素。
这里分享一个经验，在设定链接划过时出现下滑线时，使用 border-bottom 会比 text-decoration 显得更漂亮些。代码如下：
a:hover {border-bottom: 1px solid black;}
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container) {color: blue;}
否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中，设定除了 id 为 container 的 div 元素字体颜色为 blue。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
:: 伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个:: 伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式：
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
下面的代码中设定了段落中第一行的样式：
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
（IE6 竟然支持，有些意外啊。）
22. X:nth-child(n)
li:nth-child(3) {color: red;}
这个伪类用于设定一个序列元素（比如 li、tr）中的第 n 个元素（从 1 开始算起）的样式。在上面例子中，设定第三个列表元素 li 的字体颜色为红色。
看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：
tr:nth-child(2n) {background-color: gray;}
兼容浏览器：IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {color: red;}
与 X:nth-child(n) 功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {border: 1px solid black;}
与 X:nth-child(n) 功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表 ul 的边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {border: 1px solid black;}
与 X:nth-of-type(n) 功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child 伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：
ul:nth-last-of-type(3) {border: 1px solid black;}
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child {border-bottom:none;}
与:first-child 类似，它匹配的是序列中的最后一个元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {color: red;}
这个伪类用的比较少。在上面例子中匹配的是 div 下有且仅有一个的 p，也就是说，如果 div 内有多个 p，将不匹配。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
在上面代码中第一个 div 中的段落 p 将会被匹配，而第二个 div 中的 p 则不会。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {font-weight: bold;}
这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type 伪类与:nth-of-type(1) 效果相同，匹配出现的第一个元素。我们来看个例子：
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
在上面的 html 代码中，如果我们希望仅匹配 List Item 2 列表项该如何做呢：
方案一：
ul:first-of-type > li:nth-child(2) {font-weight: bold;}
方案二：
p + ul li:last-child {font-weight: bold;}
方案三：
ul:first-of-type li:nth-last-child(1) {font-weight: bold;}
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。
总结：
如果你正在使用老版本的浏览器，如 IE 6，在使用上面 css 选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。
另一点，我们在使用 javascript 类库的选择器时，例如 jquery，要尽可能的使用这些原生的 css3 选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度。
原文：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/