css优先级和权重

              第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;

    第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;

    第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;

    第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

    此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

 

       权值计算 公式:

    权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;

 

  权值比较 规则:

    当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;

 

       总结,这个比较规则就是三点

    1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;

    2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

    3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);

 

     选择器的优先级:

      通过上边的分析 我们就得出了单个选择器的优先级比较:

  css属性!important

  》内联样式 

  》ID选择器(#id)

  》类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等] 

  》元素选择器(p等) = 伪元素选择器(:after/:before/::selection等) 

  》通用选择器(*) 

  》继承的样式

 

在vue中比如你要使用css控制element中的元素这时候就要使用/deep/,但有的编辑器这样写可以运行但会出红线,比如vsCode。在vsCode中尽量使用::v-deep

 

 

作者:李李凯凯原文地址:https://www.cnblogs.com/likai87/p/17143278.html

%s 个评论

要回复文章请先登录注册