标签：层叠 important 元素 特指 选择符 规则 声明 CSS

前言

Q：如果多个规则匹配同一个元素，而且部分声明之间有冲突，那么我们如何知道哪个规则胜出呢？

A：用户代理会计算每个规则中选择符的特指度，然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突，特指度最高的声明胜出。而为了计算特指度，用户代理必须把规则“打散”成单独的规则

例如：h1 { color: silver; background: black; } 将变成以下形式。二者的特指度都是 0,0,0,1 ，赋予每个声明的值就是它

h1 { color: silver; } 
h1 { background: black; }

3.1 特指度

特指度（或权值）：表示一个css选择器表达式的重要程度

选择符的特指度由选择符本身的组成部分决定。一个特指度值由四部分构成，例如：0,0,0,0

重要声明注意：

• 重要声明要在声明末尾的分号之前插入 !important 。!important 的位置必须正确，否则声明将失效
• 带有 !important 的声明对特指度没有影响，但它会与不重要的声明分开处理
  • 所有带 !important 的声明会放在一起，而特指度冲突就在这个范围内解决
  • 非重要的声明作为一个整体，其中的冲突使用特指度解决
  • 当重要声明和非重要声明冲突时，重要声明始终胜出

特指度写法注意：

• 特指度值是从左向右比较的。特指度 1,0,0,0 比所有以 0 开头的特指度大，不管后面的数字有多大
• 通用选择符不增加特指度，它的特指度是 0,0,0,0 ，这与没有特指度是不同的
• 连接符没有特指度，即连零都没有

3.2 继承

继承：是指把一个元素的某些属性值传给其后代的机制（某些样式不仅应用到所指元素上，还应用到元素的后代上）

• 把声明应用到可以继承的元素上后，那个元素将使用声明的样式渲染；这个值继续沿着树状图向下传播到后代元素，直到没有后代为止
• 属性值绝不向上传播，即元素的样式绝不传给祖辈元素
• 在HTML中，向上传播规则有个例外：应用到body元素上的背景样式会传给HTML元素。HTML时文档的根元素，用于定义渲染文档的画布。这一例外仅发生在为body元素设定了背景，而没有为html元素定义背景的情况下

注意事项：

• 很多属性是不继承的，这通常是为了避免得到意外的结果
• 继承的值没有特指度，连零都没有

案例：因为通用选择符应用于全部元素，而且特指度为零，所以它声明的颜色gray击败继承的颜色black（由于继承的值没有特指度），因此，em元素渲染为灰色，而不是黑色

* { color: gray; }
h1#page-title { color: black; }

<h1 id="page-title">
	Meerkat	<em>Central</em>
</h1>
<p>Welcome to the best place on the web for meerkat information!</p>

3.3 层叠

层叠：是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值

CSS层叠规则：

• 按显示权重排序，以 !important 标记的规则比没有这一标记的权重高

  • 如果两个规则应用到同一个元素上，而其中一个以 !important 标记，那么有此标记的规则胜出

• 如果显示权重相同，就要考虑规则的来源。声明有三个来源：创作人员、读者、用户代理

  • 读者提供的样式中以 !important 标记的声明
  • 创作人员编写的样式中以 !important 标记的声明
  • 创作人员编写的常规声明
  • 读者提供的常规声明
  • 用户代理的默认声明

• 如果各声明的显示权重和来源相同，那么应该按特指度排序，特指度高的声明胜出

• 如果两个规则的显示权重、来源和特指度都相同，那么在样式表中的位置靠后的规则胜出

标签：层叠,important,元素,特指,选择符,规则,声明,CSS
来源： https://www.cnblogs.com/feeder/p/14979688.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。