CSS选择器与优先级

CSS选择器有:

  • 类别选择器(.xxx{})

  • 标签选择器(p)

  • id选择器(#xxx{})

  • 通用(全局)选择器(*{})

  • 属性选择器(.b[src])

  • 后代选择器(#xxx .xx{})

  • 子选择器(div>p)

  • 伪类选择器(:hover)

  • 群组选择器(div,span{})

  • 相邻同胞选择器(h1+p{})

  • 继承选择器(div p{})

CSS优先级:是由四个级别和个级别出现的次数决定

四个级别分别是:行内选择符、ID选择符、类别选择符、元素选择符

优先级的算法:

每个规则对应一个初始的四位数:0000

  • 行内选择符:1000

  • ID选择符:0100

  • 类选择符/属性选择符/伪类选择符:0010

  • 元素选择符/伪类元素选择符:0001

算法:将每条规则中,选择符对应的数相加得到的四位数,从左向右进行比较,大的优先级高。

注意点:

  • !important的优先级最高

  • 优先级相同时,则采用就近原则,选择最后出现的样式

  • 继承得来的属性,其优先级最低

排序:

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 全局选择器 > 继承 > 浏览器默认属性


版权声明:本文为qq_45954420原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。