侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

CSS选择器的优先级

2023-12-13 星期三 / 0 评论 / 0 点赞 / 20 阅读 / 2126 字

前几天面试的时候,被问到一个CSS选择器优先级的问题。题目大概是这样的:对CSS选择器排序 ID选择器 类选择器 元素选择器 属性选择器 伪类选择器 伪对象选择器 通配符选择器 ID、类、标签这3个

    前几天面试的时候,被问到一个CSS选择器优先级的问题。

    题目大概是这样的:

    对CSS选择器排序

  • ID选择器

  • 类选择器

  • 元素选择器

  • 属性选择器

  • 伪类选择器

  • 伪对象选择器

  • 通配符选择器

    ID、类、标签这3个选择器的权重比较熟悉,其他几种选择器或多或少不是很确定。所以回来以后特地查了下官网资料,对CSS选择器优先级有了更深的认识。

    CSS选择器通过a、b、c、d四个维度值来计算特征值。

选择器类型 纬度(a,b,c,d)
行内样式 1,0,0,0
ID选择器 0,1,0,0
类选择器、属性选择器、伪类选择器 0,0,1,0
元素选择器,伪元素选择器 0,0,0,1
通用元素选择器(*) 0,0,0,0

    规则也很简单,同一纬度比较个数,个数多的优先级高,相同个数则比较下一级的个数,全部都相同,则后定义的优先级高。不过如果属性中使用了!important,则优先级提高到最高。所以,总结下

!important>行内>ID>类、属性、伪类>元素、伪元素>通配符



参考文档

http://yiminghe.iteye.com/blog/254094

http://www.cnblogs.com/fsjohnhuang/p/3940732.html

http://www.w3.org/TR/CSS21/cascade.html#specificity

http://www.cnblogs.com/aaronjs/p/3156809.html







广告 广告

评论区