在CSS世界的权力—

在CSS的世界中也存在着权力即CSS权重

1. 概念

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式

2. 以前的BUG

在实际开发中，我们常常会遇到样式不生效的问题，百思不得其解，其实这就是CSS的权重在作祟，下面举个栗子

    <style>#txt{color: black;}p{color: aqua;}</style><body><p id="txt">CSS的权重问题</p></body>

段落为id选择器所赋的黑色如图：

3. 权重计算

大家都了解二进制如何比较大小吧：0010>0001 。
其权重计算与其类似。

4.权重的叠加

权重叠加计算的时候就是将叠加的权重都加起来，就像二进制加法一样，但是要记住权重可以发生叠加，但是不能发生进位可以出现 0 0 0 10 但是不能将后面的10进一位

div span {/* 0,0,0,2 */
}
p #span_one{/* 0,1,0,1 */
}
p{/* 0,0,0,1 */
}

浏览器会执行权重最大的样式，这就是选择器的权重
每个选择器都有自己的权重，组合选择器由相加计算得到
且选择器权重不会满十进一：0,1,0,0>0,0,28,0

    <style>p {color: aqua;}p #txt{color: blue;}p .txt{color: chocolate;}</style><p id="txt" class="txt">CSS的权重问题</p><p>权重的计算</p><p class="txt">优先渲染权重最大的样式</p>

结果如图：

4. 加载顺序

除了权重之外，CSS的渲染规则还有一种即根据css的引入顺序来加载。
同权重的选择器，顺序在后面的最后被加载会覆盖之前的样式

也就是我们平时所说的就近原则，选择靠近结构的那个选择器进行渲染

p{color:green;
}
link

link
p{color:green;
}

我们这里改变了两者的顺序，那么我们将会看到顺序最后引入的样式，后面的样式覆盖前面的样式

在CSS世界的权力——权重相关推荐

《css世界》的那些实用技巧
下面所有的内容都来至张鑫旭所著的<css世界>. <css世界>这是一本专门写css的书,书中并没有涉及css3的知识,但是它所展现的东西很多都是我从未知道或以前未重视的.这是 ...
学习笔记——css世界
流 "流"又叫文档流,是css的一种基本定位和布局机制.流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动."流体布局"是html默认的布局机 ...
《CSS世界》读书笔记（十一）
激进的margin属性 margin与元素尺寸以及相关布局元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...
《CSS世界》读书笔记：line-height
line-height 1. 行距与半行距 2. 半行距与精确的布局 3. 为什么line-height可以让内联元素"垂直居中"? 4. 使用line-height实现多行文本& ...
CSS世界-第四章盒尺寸四大家族
盒尺寸的4个盒子:content box,padding box,border box,margin box 一深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...
Vue css样式穿透和权重
普通的html.CSS结构,样式权重为 !important > 行内 > 头部 > 引入.但是在vue里面,我们的文件结构发生改变,不再是html文件而是vue文件,<sty ...
字母‘x‘在CSS世界中的角色和故事
字母'x'在CSS世界中的角色和故事 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordp ...
《CSS世界》笔记二：盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐写在前面在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...
张鑫旭和他的《CSS世界》
说到本书的作者,前端圈里没见过他的人有很多,但没读过他文章的人很少,他就是很多前端同行眼中的,张老师,张大神--张鑫旭(以下简称"张") 前一段时间,去参加"前端体验大会 ...

在CSS世界的权力——权重