你也许已经掌握了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[]
在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现，需要这样做：
a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] { color: red; }看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘>html代码：
<a href="path/to/image.jpg" >"image"> 图片链接 </a>
css代码如下：
a[] { color: red; }这样所有链接到图片的链接字体颜色为红色。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：
html代码
<a href="path/to/image.jpg" >"external image"> Click Me, Fool </a>
css代码
a[] { color: red; }a[] { border: 1px solid black; }在上面例子中，匹配>兼容浏览器：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(https://www.lvldy.com/i/logo.gif)}上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动，写法如下：
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%; }此示例使用：after伪类在元素后面附加一个空格，然后清除它。
根据CSS3 Selectors规范，从技术上讲，您应该使用两个冒号::的伪元素语法。但是，为了保持兼容，用户代理也将接受单个冒号用法。实际上，在这一点上，在项目中使用单冒号版本更为明智。
兼容浏览器：IE8+、Firefox、Chrome、Safari、Opera
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-line { font-weight: bold; font-size: 1.2em;}我们可以使用伪元素（由::标记）来设置元素片段的样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪元素只能用于块状元素。
伪元素由两个冒号组成：
::
下面的代码设定了段落中第一个字母的样式：
p<span class="code-snippe
