在这之前只知道css权重的皮毛，比如说：行内权重比头部权重高，头部比外部样式权重高…………工作中才知道真正理解css权重重要性。理解权重了才能写出来最优css选择器来。对后面学习less，scss有很大帮助。
从css代码存放的位置来看，权重计算当然是--->内嵌样式 > 内部样式表 > 外联样式表!然而工作中我们的css代码都是写在外联样式表中的咯。
参考w3c样式选择器权重优先级是这个样子的
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
有一种计算权重方法当然是不是官方有待考究
important 1 0 0 0
id 0 1 0 0
class 0 0 1 0
tag(标签) 0 0 0 1
伪类 0 0 1 0
att属性 0 0 1 0
伪对象 0 0 0 1
通配符 0 0 0 0
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择 器的优先级，用100标示ID选择器的优先级。比如 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
对于什么情况下使用什么选择器，用不同选择器的原则是：第一：准确的选到要控制的标签；第二：使用最合理优先级的选择器；第三：HTML和CSS代码尽量简洁美观。
选择器种类
严格意义上说CSS的选择器分类只能分成三种，标签名、类选择器、ID选择器。当然这也是设计之初就这么设计的。后面的选择器都是由于特殊需求添加的，当初我学习的时候就这些选择器也是够用的了！
标签选择器：p{}
类选择 ： .container{}
ID : 选择器 #logo{}
当然了ID选择器在一个页面里面你只能有一个，多个的话当然不会报错，毕竟CSS不是编程语言嘛！但是后台开发人员经常使用ID，如果不幸他命名规则和你定义一样的，那这个错误就不好找出来了。
扩展选择器：
后代选择器：p span a{}; 后代选择就是在上一个选择器的后面加一个空格接着写选择器。这么写匹配到的标签就更少了。当然权重就会更高了！
群组选择器 ： p,div,img{};群组选择器是当多个标签都需要同样的样式的时候，用一个逗号分隔开多个选择器。这样写法会节省很多代码量
下面介绍一下css2,css3中的选择器
CSS1&2中的选择器介绍
CSS3 新增选择器介绍
CSS3属性选择器
CSS3结构伪类选择器
CSS3UI元素状态伪类选择器
CSS3其他新增选择器
CSS1&2元素选择器
元素选择器
* 通用选择器
E 元素选择器
E#Id id选择器
E.class 类选择器
关系选择器
E F 包含选择器E元素包含的F元素。
E>F 子选择器 选择E元素的子元素F
E+F 相邻选择器E元素之后F元素
伪类选择器
E:link链接伪类未被访问前样式
E:visited 以被访问过的样式
E:hover 鼠标悬停时的样式
E:active鼠标点击与释放之间
E:focus元素成为输入焦点
E:lang匹配使用特殊语言的E元素
属性选择器
E[att]选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值为val的E元素
E[att~="val"] 选择具有att属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素
E[att|="val"] 具有att属性且元素值为以val开头并用连接符-分隔的字符串的E元素
伪对象选择器
E:first-letter设置对象内的第一个字符的样式。
E:first-line设置对象内的第一行的样式
E:before设置在对象前发生的内容，用来和content属性一起使用
E:after设置在对象后发生的内容，用来和content属性一起使用。
CSS3新增选择器 4个
E F 包含选择器
E>F 子选择器
E+F相邻选择器
E~F兄弟选择符
P~P{color:#f00} 选择的是第一个P后面的P元素。（只能选择它后面的兄弟）
结构伪类选择器
E:rootE在文档的根元素
E:first-child父元素的第一个子元素E
E:last-child父元素的最后一个子元素E
E:only-child父元素仅有的一个子元素E
E:nth-child(n)父元素的第n个子元素E
E:nth-last-child(n)父倒数第n个子元
E:first-of-type同类型中的第一个同级兄弟元素E
E:last-of-type同类型中最后一个同级兄弟元素E.
E:only-of-type同类型中唯一的一个同级兄弟元素E
E:nth-of-type(n)同类型中第n个同级兄弟元素E.
E:nth-last-of-type(n)匹配同类中倒数第n个同级兄弟元素E
E:empty没有任何子元素包括text节点的元素E.
P:first-child{}解读，先找到P元素，再找他的父节点，从父节点去找第一个元素为P的节点。
P:last-child{}和ｐ:first-child{}差不多
li:nth-child(2){}选中指定序号。找li父元素ul，找到ul的第二个子元素是否是li,是就选中。
li:nth-child(even){}/*even选中偶数，odd选中奇数*/
li:nth-child(3n+1){}/*自定义序列类型（正序）*/
li:nth-last-child(){}/*是nth-child()的倒序*/
P:first-of-type{}找到第一个是P标签的元素。
上面的标签可分为 child系类和of-type系列
E:root{}用法只有一个，
html:root{},其他标签都没有用。这个选择器我只在bootstrap中见过！可能它真的有用吧