CSS选择器及其优先级(css选择器必备知识点)

前端这点事 19 0

选择器格式优先级权重
id选择器#id100
类选择器#classname10
属性选择器a[ref=“eee”]10
伪类选择器li:last-child10
标签选择器div1
伪元素选择器li:after1
相邻兄弟选择器h1+p0
子选择器ul>li0
后代选择器li a0
通配符选择器*0

对于选择器的优先级

  • 标签选择器、伪元素选择器:1

  • 类选择器、伪类选择器、属性选择器:10

  • id 选择器:100

  • 内联样式:1000

注意事项:

  • !important声明的样式的优先级最高;

  • 如果优先级相同,则最后出现的样式生效;

  • 继承得到的样式的优先级最低;

  • 通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以它们的权值都为 0 ;

  • 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

标签: CSS

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~