常用的选择器如下：

基础选择器

• 通用元素选择器，匹配任何元素
  * { margin:0; padding:0; }

• 标签选择器，匹配所有使用E标签的元素
  p { font-size:2px; }

• 类选择器，匹配所有class属性中包含wrap的元素
  .wrap { color:red;}

• id选择器，匹配所有id属性等于footer的元素
  #main{ color:red;}

组合选择器

• 多元素选择器，用,分隔，同时匹配元素E或元素F
  h1,p { color:#f00;}

• 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
  #nav li { display:inline; }

• 子元素选择器，用>分隔，匹配E元素的所有直接子元素
  div > p{ color:#f00; }

• 直接相邻选择器，匹配E元素之后的相邻的同级元素F
  p + p { color:#f00; }

属性选择器

• 匹配所有具有att属性的E元素，不考虑它的值。
  p[title] { color:#f00; }

• 匹配所有att属性等于“val”的E元素
  div[class=”error”] { color:#f00; }

• 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
  td[class~=”name”] { color:#f00; }

伪类选择器

• 匹配元素E的第一个子元素

  E:first-child
  

• 匹配父元素的最后一个子元素
  E:last-child

• 匹配所有未被点击的链接
  E:link

• 匹配所有已被点击的链接
  E:visited

• 匹配鼠标已经其上按下、还没有释放的E元素
  E:active

• 匹配鼠标悬停其上的E元素
  E:hover

• 匹配获得当前焦点的E元素
  E:focus

• 匹配表单中禁用的元素
  E:disabled

• 匹配其父元素的第n个子元素，第一个编号为1
  E:nth-child(n)

伪元素选择器

• 匹配E元素内容的第一行
  E::first-line

• 匹配E元素内容的第一个字母
  E::first-letter

• 在E元素之前插入生成的内容
  E::before

• 在E元素之后插入生成的内容
  E::after

a标签有四个伪类选择器，a:link, a:hover, a:active, a:visited，他们的顺序是怎样的呢？
a:link > a:visited > a:hover > a:active原因是：浏览器解析会遵循一个原则：当选择器的优先级相等时，写在后面的会覆盖前面的。a:link, a:hover, a:active, a:visited这四个选择器的优先级都一样，当a标签指向的链接没有访问过时，默认触发link状态，所以会用到a:link指定的样式，当a标签指向的链接被访问过时，它同时处于a:link和a:visited状态，而a:link和a:visited的优先级相同，后面的会覆盖前面的，所以用哪个样式由它们的顺序决定，将a:visited写在a:link后，让访问过的链接使用a:visited指定的样式，同理，当用户的鼠标悬停在a标签指向的链接上时，它同时处于link，visited， hover状态，将a:hover写在 a:link和a:visited之后，让这个链接使用 a:hover指定的样式，当用户鼠标点击a标签指向的链接时(鼠标按住没有松开的状态)，这个时候链接同时处于link, visited，hover，active四种状态，要让链接用到a:active指定的样式，就要将a:active写在最后。

顺带说一下就是，选择器还有优先级，

CSS优先级从高到低依次是：

1. 在属性后面使用！important会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配选择器
9. 浏览器自定义