page contents

css选择器的优先级是怎样的

CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器

attachments-2021-10-izUE9wpz615e5eb44f1ea.jpg

CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层面,优先级是由 A 、B、C、D 的值来决定的,其中它们的值计算规则如下:

  • A 的值等于 1 的前提是存在内联样式, 否则 A = 0;
  • B 的值等于 ID选择器 出现的次数;
  • C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
  • D 的值等于 标签选择器 和 伪元素 出现的总次数 。

就比如下面的选择器,它不存在内联样式,所以A=0,不存在id选择器B=0,存在一个类选择器C=1,存在三个标签选择器D=3,那么最终计算结果为: {0, 0, 1 ,3}

  1. ul ol li .red {
  2. ...
  3. }

按照这个结算方式,下面的计算结果为: {0, 1, 0, 0}

  1. #red {
  2. }

我们的比较优先级的方式是从A到D去比较值的大小,A、B、C、D权重从左到右,依次减小。判断优先级时,从左到右,一一比较,直到比较出最大值,即可停止。

比如第二个例子的B与第一个例子的B相比,1>0,接下来就不需要比较了,第二个选择器的优先级更高。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱,但不熟悉爬虫与反爬虫技术,没有接单途径,也缺乏兼职经验
关注下方微信公众号:Python编程学习圈,获取价值999元全套Python入门到进阶的学习资料以及教程,还有Python技术交流群一起交流学习哦。

attachments-2022-06-xtdkWBPQ62b009f733eb2.jpeg

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1474 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章