CSS选择器优先级与效率优化_html/css
来源:懂视网
责编:小采
时间:2020-11-27 16:10:07
CSS选择器优先级与效率优化_html/css
CSS选择器优先级与效率优化_html/css_WEB-ITnose: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
导读CSS选择器优先级与效率优化_html/css_WEB-ITnose: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

本文收集网上各处关于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;}
样式位置的影响
同 同级,应用取决于
Top