CSS选择器、优先级与匹配原理

前端开发 作者: 2024-08-25 21:10:02
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好废话就不多说了CSS 2.1 selectors, Part 1计算指定选择器的优先级:重新认识CSS的权重通配选择符的权值 0
  1. 标签的权值为 0,1
  2. 类的权值为 0,1,0
  3. 属性选择的权值为 0,1
  4. ID的权值为 0,0
  5. important的权值为最高 1,0
  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关
Gecko overflows the count of classes into the count of IDs,each of which holds 8 bits.

— Cameron McCormack (@heycam) August 16,2012

  1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出
  2. 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling,descendant and child selectors)对页面性能的改善更值得关注。
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68601.html