CSS 选择器效率从高到低的排序如下：
| 选择器 | 用法 |
|---|---|
| id选择器 | #myid |
| 类选择器 | .myclassname |
| 标签选择器 | div,h1,p |
| 相邻选择器 | h1+p |
| 子选择器 | ul > li |
| 后代选择器 | li a |
| 通配符选择器 | * |
| 属性选择器 | a[rel="external"] |
| 伪类选择器 | a:hover, li:nth-child |
常见的选择器
| 选择器 | 例子 | 解释 |
|---|---|---|
| * | * {margin: 0; padding: 0;} | 星号呢会将页面上所有每一个元素都选到，也可以用来选择某元素的所有子元素 |
| #X | #container { 960px; margin: auto;} | Id选择器 |
| .X | .error { color: red;} | class 选择器 |
| X Y | li a { text-decoration: none;} | 后代选择器 |
| X | a { color: red; } ul { margin-left: 0; } | 想定位页面上所有的某标签 |
| X:visited and X:link | a:link {color:red;} a:visited {color: purple;} | :link这个伪类来定位所有还没有被访问过的链接；使用:visited来定位所有已经被访问过的链接。 |
| X+Y | ul + p { color: red;} | 相邻选择器。选中指定元素的直接后继元素。（要求紧挨着，X ~ Y不要求） |
| X>Y | div#container > ul { border: 1px solid black;} | 选中指定元素的直接子元素。 |
| X ~ Y | ul ~ p { color: red;} | 选择跟在目标元素后面的所有匹配的元素。 |
| X[title] | a[title] { color: green;} | 上面的这个例子中，只会选择有title属性的元素 |
| X[href="foo"] | a[href="test.cn"] { color: #1f6053; /* nettuts green */} | 上面这片代码将会把 href 属性值为"test.cn"的锚点标签设置为绿色，而其他标签则不受影响。（默认是包含即会选中） |
| X[href^="href"] | a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } | 定位锚点属性href中以http开头的标签 |
| X[href$=".jpg"] | a[href$=".jpg"] { color: red; } | 定位以.jpg结尾的标签 |
| X[foo~="bar"] | a[data-info~="external"] { color: red; } | 能选择<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> |
| X:checked | input[type=radio]:checked { border: 1px solid black; } | 定位那些被选中的单选框和多选框 |
X Y 和 X > Y
X Y 和 X > Y 的差别就是后面这个指挥选择它的直接子元素。看下面的例子：
<div id="container">
<ul id="List">
<li>
<ul id="Item">
<li>Child</li>
</ul>
</li>
</ul>
</div>
在上面的例子中，#container > ul 只能选择id为List的ul元素，而#container ul则会选择id为List和Item的ul元素。