笔记《五》CSS的继承

（一）什么是继承？

一个选择器不仅作用域该选择器还作用与该选择器的子选择器

比如：

head中style：

p {

        color: red;

    }

body中：

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩</p>

效果：所有文字，不管是p内的还是span内的都是红色的。

（二）选择器的优先级

1、各个选择器的优先级

给div配置选择器和style 选择器设置

上述的效果是：div为style：orange

优先级：内联>ID>类>标签>通配

2、为什么会有：“内联>ID>类>标签>通配”的优先级呢？因为有权值

head的style中

.first{color:green;}

span{color:pink;}

#second{ color:blue;}

body中：

<p id="second" class="first">到了三年级下学期时<span>老师</span>提出了一个很简单的问题</p>

效果如下：老师为pink；其余的为blue；

原因如下：ID选择器的权重为100；类选择器的权重为10；标签选择器的权重为1；!important的权重最高。

所以，“老师”两个字的权重是：100+1

其余字的权重为100；

p{color:red;}/*权值为1*/

p span{color:green;}/*权值为1+1=2*/

.warning{color:white;}/*权值为10*/

p span.warning{color:purple;}/*权值为1+1+10=12*/

#footer .note p{color:yellow;}/*权值为100+10+1=111*/

!important的用法：

head中style内：

p{color:red!important;}

.first{color:blue}

body内

<p class="first">觉得客服接口的加实付</p>

效果：显示红色，因为!important的权重最高。