关于CSS权重，一套计算公式来去计算，就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。

遇到样式应用问题，计算一下权重就知道优先级。

具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 重要的 ∞ 无穷大

注意

1. 权重能叠加但不能进位

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

2. 相同权重，就近原则（CSS的层叠性）

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

<style type="text/css">

	.c1 .c2 div{

		color: blue;

	}

	div #box3{

		color:green;

	}

	#box1 div{

		color:yellow;

	}

</style>

</head>

<body>

	<div id="box1" class="c1">

		<div id="box2" class="c2">

			<div id="box3" class="c3">

				文字

			</div>

		</div>

	</div>

</body>

文字为yellow， 因为div #box3 的权重为 0001 + 0010 = 0011；#box1 div 的权重为 0010 + 0001 = 0011；相同权重，但后者在下面，比较近，根据层叠性，黄色覆盖了绿色。

3. 继承样式的权重为0。

即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

		<style type="text/css">

			div p{

				color:red;

			}

			#father{

				color:red!important;

			}

			p.c2{

				color:blue;

			}

		</style>

	</head>

	<body>

		<div id="father" class="c1">

			<p class="c2">

				字体是蓝色

			</p>

		</div>

继承来的!important权重变为0000，被.c2覆盖（.c2权重为0010，并且加上层叠性），所以不起作用。但是#father p就是 0000 + 0001 = 0001

CSS - 权重，样式优先级的更多相关文章

  1. css权重及优先级问题

    css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...

  2. css层叠样式优先级总结

    虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...

  3. CSS 之 样式优先级机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...

  4. css 选择器样式优先级

    !important > 行内 >id > class >tag >*

  5. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  6. CSS权重;慎用!important

    初初接触样式的前端开发者在碰到样式覆盖时,最先选择的往往是!important. 但是这种做法不好,应该优先考虑从样式的级联属性或者位置来解决问题. 切记以下情况永远不要使用!important: 1 ...

  7. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  8. 关于css里决定样式优先级的权重

    最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...

  9. CSS权重及样式优先级问题

    CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...

随机推荐

  1. 8.14-T2捕老鼠（cat）

    题目大意 有 N 个仓库,排成了一排,编号为 1-N.假设在第 i 个仓库点燃艾条,烟雾就会充满该仓库,并向左右扩散Ai的距离,接着所有|i-j|<=Ai的仓库 j 的老鼠被消灭.最少需要多少支 ...

  2. code ELIFECYCLE 报错处理

    npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! m-kbs-vip@1.2.12 toserver: `tua -p toserver`npm ERR ...

  3. Android学习11

    Android存储概念 File内部存储 通过file=openFileOutput()获得,将数据存储在data/data/+包名+files下面. layout布局文件: <?xml ver ...

  4. Git - 后续

    1. 概述 现在讲了这些, 也就能应付一下日常的单机操作 后续大概会讲这些内容 分之间的 merge 本地仓库与远程仓库的互动

  5. A. DZY Loves Chessboard

    DZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m columns. So ...

  6. Java开发中使用模拟接口moco响应中文时乱码

    场景 在开发中需要依赖一些接口,比如需要请求一个返回Json数据的接口,但是返回Json数据的接口要么是没搭建,要么是交互比较复杂. 此时,就可以使用moco来模拟接口返回接口数据,以便开发和测试工作 ...

  7. reStructuredText语法

    reStructuredText 除了makedown语法这还存在另一种语法reStructuredText 相对Markdown来说,在写书方面更有优势: 使用sphnix能够自动生成目录和索引文件 ...

  8. cs/bs

    c(客户端)/s服务器:使用前必须安装,更新是,c s同时更新,不能跨频繁太,采用自由协议,相对来说安全. b(浏览器)/s:本质上还是cs ,只是使用了浏览器:如京东,淘宝.无需安装,客户端不需要更 ...

  9. [踩坑记录] runtime error: load of null pointer of type 'const int' (leetcode)

    leetcode上面做题遇到的错误 原因: 在调用函数时,如果返回值如果是一个常量则没问题.如果返回值若为指针则可能会出现该错误,假如返回的指针地址指向函数内的局部变量,在函数退出时,该变量的存储空间 ...

  10. VM虚拟机黑屏 鼠标进不去

    #开始 可能是我脸黑吧 最近用虚拟机好几次都是黑屏 鼠标进不去 但是任务管理器显示确实有资源消耗 也就是说实际上应该是开机成功了(但是听不到声音 也许是没有开机吧) #解决方案 管理员权限打开 cmd ...