CSS Specificity
As mentioned above, CSS styles follow an order of specificity and point values to determine(确定) when styles override(覆盖) one another or take precedence(优先). Nettuts recently had a nice article in which the point values for css were explained. They are like so:
- Elements - 1 points
- Classes - 10 points
- Identifiers - 100 points
- Inline Styling - 1000 points
When in doubt, get more specific with your style declarations(声明). You can also use the !important declaration for debugging(调试) purposes if needed.
Read more about css specificity:
中文:
CSS方面很多人都问过我,设定后的CSS后却没有效果,样式失效,样式冲突,
这种问题一般发生于新手,很多情况下是忽视了CSS中的权重 specificity,
我试总结关于specificity方面的一些规则、算法及实例
希望对新人能有所帮助~!
作者:孙佳(http://www.sjweb.cn/)
关于CSS specificity
CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:
Selectors 选择符 |
Syntax Samples 语法 |
ensample 示例 |
Specificity 特性 |
通配选择符(Universal Selector) |
* |
*.div { width:560px;} |
0,0,0,0 |
类型选择符(Type Selectors) |
E1 |
td { font-size:12px;} |
0,0,0,1 |
伪类选择符(Pseudo-classes Selectors) |
E1:link |
a:link { font-size:12px;} |
0,0,1,0 |
属性选择符(Attribute Selectors) |
E1[attr] |
h[title] {color:blue;} |
0,0,1,0 |
ID选择符(ID Selectors) |
#sID |
#sj{ font-size:12px;}
|
0,1,0,0 |
类选择符(Class Selectors) |
E1.className |
.sjweb{color:blue;} |
0,0,1,0 |
子对象选择符(Child Selectors) |
E1 > E2 |
body > p {color:blue;} |
E1+E2 |
相邻选择符(Adjacent Sibling Selectors) |
E1 + E2 |
div + p {color:blue;} |
E1+E2 |
选择符分组(Grouping) |
E1,E2,E3 |
.td1,a,body {color:blue;} |
E1+E2+E3 |
包含选择符(Descendant Selectors) |
E1 E2 |
table td {color:blue;} |
E1+E2 |
规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:<div style=”color: red”>sjweb</div>
外部定义指经由<link> 或<style>标签定义的规则;
2.!important声明的Specificity值最高;
3.Specificity 值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;
4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。
算法:
当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加,
{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity,
然后在比较取舍时按照从左到右的顺序逐位比较。
实例分析:
1.div { font-size:12px;}
分析:
1个元素{ div},Specificity值为0,0,0,1
2.body div p{color: green;}
分析:
3个元素{ body div p },Specificity值为0,0,0,3
3.div .sjweb{ font-size:12px;}
分析:
1个元素{ div },Specificity值为0,0,0,1
1 个类选择符{.sjweb},Specificity值为0,0,1, 0
最终:Specificity值为 0,0,1,1
4.Div # sjweb { font-size:12px;}
分析:
1个元素{ div },Specificity值为0,0,0,1
1 个ID选择符{sjweb},Specificity值为0,1,0, 0
最终:Specificity值为 0,1,0,1
5.html > body div [id=”totals”] ul li > p {color:red;}
分析:
6个元素{ html body div ul li p} Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0
2个其他选择符{ > > } Specificity值为0,0,0,0
最终:Specificity值为 0,0,1,6
你还可以查看如下资料:http://www.obird.net/?p=139
原文链接: http://www.cnblogs.com/yizuierguo/archive/2009/03/16/1413721.html
分享到:
相关推荐
css-specificity-map 映射 CSS 特异性数据以创建。 基于经验。 交互式示例。安装使用节点使用 npm 安装: npm install css-specificity-map包括在您的代码中: var cssSpecificityMap = require('css-specificity-...
specificity-graph, 为你的CSS生成交互式的特殊图形 特性图( 用于 CSS ) 作者: 。 生成一个交互式线条图,显示样式表中的特殊性。 使用 d3,css解析器,和特异性。安装npm install specificity-graph用法specifity-...
PostCSS增加特异性 插件可以增加选择器的特殊性。 处理您无法删除CSS(主要是从第三方),。 安装 npm install postcss-...// Process your CSS with postcss-increase-specificity var output = postcss ( [ inc
CSS 特异性图这个项目的目标是采用提供的 CSS,分析选择器,并生成一个特异性图(基于)。 正因为我们都在同一页面上,我会经常拼错“特殊性”,而且经常不纠正它。 想要演示? 。要求PHP 您想要分析的一些 CSS...
CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面...
css-specificity 是包装模块。 安装 $ npm install css-specificity 例子 var specificity = require ( 'css-specificity' ) var calc = specificity . calc ( '.class, p.sel:after' ) var winner = specificity ...
css 特异性css-specificity 接受一个字符串并告诉您其中每个选择器的 CSS 特异性。用法 var cssspecificity = require('css-specificity');var s = cssspecificity('#id .class:hover a, .nav:hover a');console.log...
Gulp 的特异性图插件使用的 specificity-graph Node 模块生成一个交互式折线图,显示样式表中的特异性。 基于的想法。变更日志0.0.1-beta 初始预发布。 绝对是要解决的事情。
是一个非常简单的工具,它允许复制和粘贴CSS并分析样式表的特定性状态。 可以通过将节点本身悬停来分析任何特异性峰。 专一性 计算起来很容易:理想情况下,它是由4个值组成,并用逗号( 0,0,0,0 )分隔,每种选择器...
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 ...
特异性分析您的 CSS 文件,收集有关选择器特异性的信息并将其保存为配置文件。 您可以使用不同的报告来浏览这些配置文件或编写自己的报告。使用安装: $ npm install -g node-specificity具体提供以下命令: 首先,...
Sass 特异性 Sass (SCSS) 特异性计算器实用程序,用于通过 mixin 或函数... // specificity-value: 770; } // As a function a .head #of + time { $this-specificity-map : specificity ( & ); // 1, 1, 2 $this-spe
The CSS Quick Syntax Reference is a 150-page syntax reference to the Cascading Style Sheet specification and style sheet language. It presents the essentials of CSS in a well-organized format that can...
多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性(Specificity)盒子模型(CSS重点)看
特殊性可视化工具一种分析CSS中选择器的特殊性的可视化方法:isellsoap.github.io/specificity-visualizer查看介绍特殊性可视化工具的博客文章。 它详细介绍了“为什么”,“为什么……”特异性可视化工具一种用于...
This revised edition provides a comprehensive guide to CSS implementation, along with a thorough review of the latest CSS specifications. CSS is a constantly evolving language for describing the ...
安装使用 : npm install --save reveal-css-snippet演示版在上!用法RevealCSSSnippet()返回一个<pre><code> DOM节点,该节点允许您实时编辑演示文稿CSS样式,这对于提供实时编码演示非常有用。 然后,您可以将此...
您可以通过URL地址https://aleshaoleg.github.io/holy-grail-markup/implementetion/specificity-graph查找每种实现的特异性图。 例如,这里的raw示例: : 。 s 由和创建。 合作者: 。 贡献者 和CSS-Modules示例...
CSS 记者 基于 Harry Roberts 和 Katie Fenn 的 用法 > sudo npm install -g css-reporter > css-reporter " glob/to/css/files/**/*.css " 并在浏览器中访问localhost:9000 已知的问题 媒体查询中的选择器行为不...