Heim > Web-Frontend > HTML-Tutorial > CSS选择器优先级与效率优化_html/css_WEB-ITnose

CSS选择器优先级与效率优化_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:39:17
Original
896 Leute haben es durchsucht

CSS选择器优先级与效率优化

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇。

各类选择器的优先级

  • important声明 1,0,0,0
  • ID选择器 0,1,0,0
  • 类选择器 0,0,1,0
  • 伪类选择器 0,0,1,0
  • 属性选择器 0,0,1,0
  • 标签选择器 0,0,0,1
  • 伪元素选择器 0,0,0,1
  • 通配符选择器 0,0,0,0
  • 在上面的选择器中,此外,经测试

    属性选择器 = 伪类选择器(应用最后一个)

    :last-child{color:red;}[desc]{color:green;}
    Nach dem Login kopieren

    伪类选择器 > 相邻选择器

    :last-child{color:green;}p ~ p{color:blue;}
    Nach dem Login kopieren

    相邻选择器 = 子选择器 = 后代选择器(应用最后一个)

    p~p{color:red;}body p{color:blue;}body > p{color:green;}
    Nach dem Login kopieren

    后代选择器 > 标签选择器

    p ~ p{color:blue;}p{color:green;}
    Nach dem Login kopieren

    样式位置的影响

  • 同级,应用取决于