css权重计算方法浅谈

时间:2021-10-30 15:33:49

在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高…………工作中才知道真正理解css权重重要性。理解权重了才能写出来最优css选择器来。对后面学习less,scss有很大帮助。

  从css代码存放的位置来看,权重计算当然是--->内嵌样式 > 内部样式表 > 外联样式表!然而工作中我们的css代码都是写在外联样式表中的咯。

  参考w3c样式选择器权重优先级是这个样子的

  important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

  有一种计算权重方法当然是不是官方有待考究

  important  1  0  0  0

  id      0  0  1  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新增选择器 44个
    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{}和p: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;}