简述历代CSS选择器及其优先级
CSS 中最重要的两部分，一部分是 CSS 选择器，另一部分是 CSS 属性，本文将重点描述 CSS 选择器。CSS 的工作流程本质上就是利用选择器选择到 HTML 中的元素，然后赋予他们样式规则，让每一个元素都变成我们想要的样子，都出现在我们想让它去的位置。
CSS到目前位置已经扩充到第三版了，每扩充一版，它的选择器和属性都会有很多的扩展，这里，我将把三个版本的选择器一一进行诠释。
CSS1选择器
|
选择器 |
类型 |
说明 |
|
tagname |
标签选择器 |
选择指定标签的元素 |
|
#id |
ID选择器 |
通过ID获取元素 |
|
.class |
类名选择器 |
通过类名获取元素 |
|
ele desc |
后代选择器 |
获取包含在ele中 的desc元素，ele和desc均是选择器 |
|
ele:link |
伪类选择器 |
超链接未被访问的样式 |
|
ele:visited |
伪类选择器 |
超链接已被访问的样式 |
|
ele:hover |
伪类选择器 |
鼠标经过的样式 |
|
ele:active |
伪类选择器 |
超链接被点击时的样式 |
|
ele:focus |
伪类选择器 |
元素获取焦点后的样式 |
|
ele:first-line |
伪元素选择器 |
元素内的第一行文本 |
|
ele:first-letter |
伪元素选择器 |
元素内的第一个字符 |
CSS2 选择器
|
选择器 |
类型 |
说明 |
|
* |
通用选择器 |
选择文档中所有的元素 |
|
ele[attr] |
属性选择器 |
选取定义了attr属性的ele元素 |
|
ele[attr=“val”] |
属性选择器 |
选取定义了attr属性且值为“val”的ele元素 |
|
ele[attr~=“val”] |
属性选择器 |
选取定义了attr属性且值中含有“val”单词的ele元素 |
|
ele[attr|=“val”] |
属性选择器 |
选取定义了attr属性且值以“-”分割，“val”开头的ele元素 |
|
ele:before |
伪元素选择器 |
在ele元素前面插入内容 |
|
ele:after |
伪元素选择器 |
在ele元素后面插入内容 |
|
ele > desc |
后代选择器 |
获取desc元素，且是ele元素的子元素 |
|
ele + b |
相邻兄弟元素选择器 |
选取与ele元素相邻的b元素 |
CSS3 选择器
|
选择器 |
类型 |
说明 |
|
ele[attr^=“val”] |
属性选择器 |
选取ele元素，且它含有attr属性并以val开头 |
|
ele[attr$=“val”] |
属性选择器 |
选取ele元素，且它含有attr属性并以val结尾 |
|
ele[attr*=“val”] |
属性选择器 |
选取ele元素，且它含有attr属性并在其中包含val |
|
ele:first-child |
结构伪类选择器 |
选取ele元素，且是父元素的第一个子元素 |
|
ele:last-child |
结构伪类选择器 |
选取ele元素，且是父元素的最后一个子元素 |
|
ele:nth-child(n) |
结构伪类选择器 |
选取ele元素，且是父元素的第n个子元素 |
|
ele:nth-of-type (n) |
结构伪类选择器 |
选取ele元素，且是父元素中第n个ele元素 |
|
ele:nth-last-child(n) |
结构伪类选择器 |
选取ele元素，且是父元素的倒数第n个子元素 |
|
ele:nth-last-of-type(n) |
结构伪类选择器 |
选取ele元素，且是父元素的倒数第n个ele元素 |
|
ele:first-of-type(n) |
结构伪类选择器 |
选取ele元素，且是父元素的第1个ele元素 |
|
ele:last-of-type(n) |
结构伪类选择器 |
选取ele元素，且是父元素的最后一个ele元素 |
|
ele:only-child |
结构伪类选择器 |
选取ele元素，且是父元素中的唯一元素 |
|
ele:only-of-type |
结构伪类选择器 |
选取ele元素，且是父元素中的唯一 的ele元素 |
|
ele:empty |
结构伪类选择器 |
选取ele元素，且不含子节点 |
|
ele:root |
结构伪类选择器 |
选取html根元素 |
|
:enabled |
伪类选择器 |
选择每个启用的input元素 |
|
:disable |
伪类选择器 |
选择每个禁用的input元素 |
|
:checked |
伪类选择器 |
选择每个选中的input元素 |
|
:not(selector) |
伪类选择器 |
去除所有与给定选择器匹配的元素 |
|
::selection |
伪类选择器 |
选中文本的样式 |
以上就是目前CSS规范中绝大部分属性，一般而言，这些选择器在复杂度比较高的页面中也足够用了，但是，由于选择器众多，可以用各种办法选择到同一个元素，即CSS叠加性，再加上CSS某些属性给父元素设置可以被子元素继承，即CSS继承性。由于这两个特性，所以选择器有了优先级的概念。
至于判断某个选择器优先级的方法，我们可以给出 a/b/c/d/e/f/g 七个等级，每一个等级都比下一个等级的优先级高。
a 等级是行内样式，拥有行内样式，则a为1，否则a为0，换句话说，行内样式是优先级最高的，任何选择器都不会覆盖更改行内样式的优先级。
b 等级是id选择器的数量，选择器中含有一个id，则b等级数值加1。
c 等级是类名选择器、伪类选择器、属性选择器的数量，每包含一个，则c加1。
d 等级是标签名选择器、伪元素的数量，每包含一个，则d加1。
e 等级是通用选择器
f 等级浏览器默认的样式
g 等级是继承的样式
优先级顺序中a>b>c>d>e>f>g。
PS：本文中无论是选择器还是优先级，所述都不够全面，仅供参考。
