CSS样式优先级及权重

一、什么是继承性？
作用：给父元素设置一些属性，子元素也可以使用，这个我们就称之为继承性。

<div style="color:red">
    <p></p>
</div>
//`<div>` 的 `color: red`属性，这个属性将被 `<p>` 继承，即 `<p>` 也拥有属性 `color: red`。

“直接样式”比“祖先样式”优先级高。

<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
    <div class="son" style="color: blue"></div>
</div>

注意点：
1 并不是所有的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承
2 在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
3 CSS继承性中的特殊性
3.1 a标签的文字颜色和下划线是不能继承的
3.2 h标签的文字大小是不能继承的
应用场景**：**
一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。

二、什么是层叠性？
作用：层叠性就是CSS处理冲突的一种能力
注意点：层叠性只有在多个选择器选中“同一个标签”，然后又设置了“相同的属性”，才会发生层叠性。后写的属性覆盖掉先写的属性。
优先级
作用：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

2 优先级判断的三种方式
2.1是否是直接选中（间接选中就是指继承）
如果是间接选中，那么就是谁离目标标签较近就听谁的
2.2是否是相同选择器
如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的
2.3不同选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
规则：内联样式>Id选择器>类选择器 = 属性选择器 = 伪类选择器>标签= 伪元素选择器>通配符>继承>浏览器默认

// HTML
<div class="content-class" id="content-id" style="color: black"></div>

// CSS
#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}
//div元素的颜色为black，因为内联样式的优先级高于其他的

!important
作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高

// HTML
<div class="father">
    <p class="son"></p>
</div>

// CSS
p {
    background: red !important;
}
.father .son {
    background: blue;
}
//虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性被插入了 !important，所以 <p> 的 background 为 red。

注意点：
1 !important只能用于直接选中，不能用于间接选中
2通配符选择器选中的标签也是直接选中的
3！important只能提升被指定的属性的优先级，其他的属性的优先级不会被提升
4！important必须写在属性值的分号前面
5！important前面的感叹号不能省略

优先级的权重
作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高
权重的计算规则
1首先先计算选择器中有多少个id，id多的选择器优先级最高
2如果id的个数一样，那么再看类名的个数，类名个数多的优先级最高
3如果类名的个数一样，那么再看标签名称的个数，标签名称个数多的优先级最高
4如果id个数一样，类名个数也一样，标签名称个数也一样，那么就不会继续往下计算了，那么此时谁写在后面就听谁的，也就是说，优先级如果一样，那么谁写在后面听谁的

// HTML
<div id="con-id">
    <span class="con-span"></span>
</div>

// CSS
#con-id span {
    color: red;
}
div .con-span {
    color: blue;
}
//span颜色为red，#con-id优先级高于div，所以span的颜色为red

注意点：
只有选择器是直接选中标签的才需要计算权重

如果外部样式表和内部样式表中的样式同时使用，这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高。

// HTML
<link rel="stylesheet" type="text/css" href="style-link.css">
<style type="text/css">
    @import url(style-import.css); 
    div {
        background: blue;
    }
</style>

<div></div>

// style-link.css
div {
    background: lime;
}

// style-import.css
div {
    background: grey;
}
//从顺序上看，内部样式在最下面，被最晚引用，所以 <div> 的背景色为 blue。

错误的说法
在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。
错误的原因是：选择器的权值不能进位。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。