常用的选择器如下：
基础选择器
- 通用元素选择器，匹配任何元素
* { 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优先级从高到低依次是：
- 在属性后面使用！important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配选择器
- 浏览器自定义
