Day16 CSS Specificity 样式拍卖会

权重的概念让我联想到拍卖会，HTML元素的样式就像是拍卖会上被竞标的商品，而选择器们就像是竞标的买家一样，只有出价最高的人才能获得竞标商品。

Cascading代表的意义?

CSS是Cascading Style Sheets的缩写，而第一个字cascading(阶层式的)很明确地描述出了CSS在增加样式时所遵循的规则。浏览器在读取 CSS 样式表时，会从上到下一层一层读取下来，同个HTML元素如果有重复设定到相同属性的话，在使用同样选择器的状态下，後面出现的样式设定会覆盖掉前面的。

例如:

<p>我上班领的不是薪水，是精神赔偿金。</p>

p{
	color:red; 
	background-color: gray;
}

p{
	color:blue; 
	background-color: yellow; 
}

浏览器上看到会是蓝色的字，黄色的背景颜色，因为後免写的样式覆盖掉了前面写的

什麽是权重(Specificity)?

权重是给浏览器用来判定HTML元素该套用哪个CSS选择器写的属性时的判断依据。
虽然浏览器会由上到下解析CSS，但如果遇到了使用不同选择器来定义相同属性的HTML元素的状况时，权重大的选择器会覆盖掉权重小的，而不是遵照後面写的样式覆盖掉前面的规则。

例如:

<p class="p-color">我上班领的不是薪水，是精神赔偿金。</p>

.p-color{
	color:red; 
	background-color: gray;
}

p{
	color:blue; 
	background: yellow; 
}

p 标签选择器写的位置在 .p-color类别选择器之後，但套用到的样式却是放在前面的.p-color，原因即是类别选择器的权重大於标签选择器

选择器的权重

以下是依照权重高到低顺序为排列的选择器:

1. ID选择器 (例如: #example)

2. 类别选择器(例如: .example)、属性选择器 (例如: [type="radio"])和伪类(例如: :hover)

3. HTML标签选择器(例如: h1)和伪元素(例如: ::before)

4. 全体选择器(例如:*)不受权重影响

参考资料:Specificity- Selector Types

行内样式(Inline styles)的权重

除了可以使用选择器来改变元素的样式之外，还可以使用行内样式的改变。
而行内样式可以覆盖掉外部载入的CSS，因此也具有很高的权重。

例如:

<p style="color:blue;" class="p-color">我上班领的不是薪水，是精神赔偿金。</p>

.p-color{
	color:red; 
}

p{
	color: green; 
}

可以看到字体呈现的颜色是蓝色，因为行内样式的权重高於标签选择器和类别选择器

耍特权的!important

!important 其实和权重无关，但只要使用了!important就会覆盖掉所有的样式设定，所以很少会使用到。

Specificity- The !important exception

!important 使用方式

例如:

 <p id="main-title" class="title" style="color: purple;">我上班领的不是薪水，是精神赔偿金。</p>

#main-title { color: red; }
.title { color: pink !important; }

可以看到本来应该盖掉.title类别选择器的行内样式style="color: purple;
在加上了!important之後，直接覆盖掉了行内样式对於字体颜色属性的设定

结论: 先看权重大小，再看先後顺序

!important > inline style > ID >类别选择器/伪类/属性选择器 > 标签选择器/伪元素

可以假设如下:

!important：10000 分
inline style：1000 分
ID 选择器：100 分
class选择器/伪类/属性选择器：10 分
HTML 标签选择器/伪元素：1 分

运用这些分数加总来计算会套用到哪个样式?

例如:

  <h1 class="title">A candle loses nothing by lighting another candle.</h1>

.title{
	color: red;
	background-color:pink;
}

h1{
	color:blue;
	background-color:yellow;
}

h1 是1分
.title 是10分
所以是套用到.title内写的样式

参考资料: 【前端帮帮忙】第5期关於CSS权重，你了解多少？
图片来源:https://www.sothebys.com/en/about

以上为个人学习笔记整理
若有错误，欢迎指正