资讯专栏INFORMATION COLUMN

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

dadong / 1823人阅读

摘要:选择器优先级与效率优化本文收集网上各处关于选择器的文章总结,并自己归纳一篇。选择器类选择器标签选择器相邻选择器子选择器后代选择器通配符选择器属性选择器伪类选择器优先级高的不一定效率高举个例子与前者效率高于后者,而后者优先级高于前者。

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;}

伪类选择器 > 相邻选择器

:last-child{color:green;}
p ~ p{color:blue;}

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

p~p{color:red;}
body p{color:blue;}
body > p{color:green;}

后代选择器 > 标签选择器

p ~ p{color:blue;}
p{color:green;}
样式位置的影响

同级,应用取决于