`
Virgo_S
  • 浏览: 1138465 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

16、CSS的优先级特性Specificity

    博客分类:
  • CSS
阅读更多
  如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
  它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。
  选择器一样的情况下后面的会覆盖前面的属性。比如:
p { color: red; }
p { color: blue; }

  p元素的元素将是蓝色,因为遵循后面的规则。
  然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:
div p { color: red; }
p { color: blue; }

  也许你看起来p元素在div元素里面的颜色是蓝色,但是结果显示确实红色。按照上面的原则,后面覆盖前面的原则。这里,样式匹配原则,div元素里面的p元素显示颜色,只有
div p { color: red; }

符合样式规则
  一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。
  p的特性是1(一个html选择器) 
  div p的特性是2(两个html选择器) 
  .tree的特性是10(1个class选择器) 
  div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器) 
  #baobab的特性是100(1个ID选择器) 
  body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)


  按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。


分享到:
评论

相关推荐

    CSS优先级算法如何计算?有哪些判定规定及计算方式

    CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面...

    CSS3笔记1

    多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性(Specificity)盒子模型(CSS重点)看

    postcss-increase-specificity:为什么? 处理您无法删除CSS(主要是从第三方)。 增加选择器的特异性

    PostCSS增加特异性 插件可以增加选择器的特殊性。 处理您无法删除CSS(主要是从第三方),。 安装 npm install postcss-...// Process your CSS with postcss-increase-specificity var output = postcss ( [ inc

    css-specificity:CSS 选择器特异性计算器

    css-specificity 是包装模块。 安装 $ npm install css-specificity 例子 var specificity = require ( 'css-specificity' ) var calc = specificity . calc ( '.class, p.sel:after' ) var winner = specificity ...

    css-specificity-map:映射用于绘图的 CSS 特异性数据

    css-specificity-map 映射 CSS 特异性数据以创建。 基于经验。 交互式示例。安装使用节点使用 npm 安装: npm install css-specificity-map包括在您的代码中: var cssSpecificityMap = require('css-specificity-...

    css-specificity

    css 特异性css-specificity 接受一个字符串并告诉您其中每个选择器的 CSS 特异性。用法 var cssspecificity = require('css-specificity');var s = cssspecificity('#id .class:hover a, .nav:hover a');console.log...

    css-specificity-graph:使用 CSS,分析选择器,并生成特异性图

    CSS 特异性图这个项目的目标是采用提供的 CSS,分析选择器,并生成一个特异性图(基于)。 正因为我们都在同一页面上,我会经常拼错“特殊性”,而且经常不纠正它。 想要演示? 。要求PHP 您想要分析的一些 CSS...

    specificity-graph, 为你的CSS生成交互式的特殊图形.zip

    specificity-graph, 为你的CSS生成交互式的特殊图形 特性图( 用于 CSS ) 作者: 。 生成一个交互式线条图,显示样式表中的特殊性。 使用 d3,css解析器,和特异性。安装npm install specificity-graph用法specifity-...

    Enduring CSS

    The problems of CSS at scale - specificity, the cascade and styles intrinsically tied to element structure. The shortfalls of conventional approaches to scaling CSS. The ECSS methodology and the ...

    specificity:CSS 资源管理器

    特异性 通过可视化探索您的 CSS! 特异性分析您的 CSS 文件,收集有关选择器特异性的信息并将其保存为配置文件。 您可以使用不同的报告来浏览这些配置文件或编写自己的报告。使用安装: $ npm install -g node-...

    CSS Quick Syntax Reference

    7. Specificity 8. Colors 9. Units 10. CSS properties 11. Text 12. Spacing 13. Font 14. Background 15. Gradients 16. Box model 17. Border 18. Outline 19. Margin and padding 20. Dimension 21. ...

    CSS The Definitive Guide 4th Edition 2017年出版1088页

    Selectors, specificity, and the cascade Values, units, fonts, and text properties Padding, borders, outlines, and margins Colors, backgrounds, and gradients Floats and positioning tricks Flexible box ...

    英文原版-Selectors Specificity and the Cascade 1st Edition

    When you purchase either the print or the ebook edition of Selectors, Specificity, and the Cascade, you’ll receive a significant discount on the entire Definitive Guide when it’s released....

    15个必须阅读的CSS入门文章

    你是新学习CSS?在这个漂亮的学习语言的初始过程可能是一个有点惊人,有很多可以学习它有时很难找出哪里开始。...Specifics on CSS Specificity Faux Columns Sexy Ordered Lists with CSS Divitis: What it is and

    CSS代码是否合理?是否优化?

    CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 Specificity 具体的计算规则: 元素的 style ...

    a method to recognize specificity determining.pdf

    a method to recognize specificity determining.pdf

    sass-specificity:Sass 特异性计算器

    Sass 特异性 Sass (SCSS) 特异性计算器实用程序,用于通过 mixin 或函数计算(和显示)任何有效简单/复合/复杂选择器的特异性或特异性图。... $this-specificity-map : specificity ( & ); // 1, 1, 2 $this-spe

    specificity-graph:您项目CSS专用性的图形表示

    是一个非常简单的工具,它允许复制和粘贴CSS并分析样式表的特定性状态。 可以通过将节点本身悬停来分析任何特异性峰。 专一性 计算起来很容易:理想情况下,它是由4个值组成,并用逗号( 0,0,0,0 )分隔,每种选择器...

    :chart_increasing:一种可视化的方法来分析CSS中选择器的特殊性。-JavaScript开发

    特殊性可视化工具一种分析CSS中选择器的特殊性的可视化方法:isellsoap.github.io/specificity-visualizer查看介绍特殊性可视化工具的博客文章。 它详细介绍了“为什么”,“为什么……”特异性可视化工具一种用于...

Global site tag (gtag.js) - Google Analytics