css权重计算方法浅谈

在这之前只知道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:root E在文档的根元素
　　　　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中见过！可能它真的有用吧

　　

简洁、高效的CSS

 

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

 

◆不要在ID选择器前使用标签名

 

一般写法：DIV#divBox

 

更好写法：#divBox

 

解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。

 

◆不要再class选择器前使用标签名

 

一般写法：span.red

 

更好写法：.red

 

解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

 

    p.red{color:red;}  

    span.red{color:#ff00ff} 

 

如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

 

◆尽量少使用层级关系

 

一般写法：#divBox p .red{color:red;}

 

更好写法：.red{..}

 

◆使用class代替层级关系

 

一般写法：#divBox ul li a{display:block;}

 

更好写法：.block{display:block;}