(一)什么是继承?
一个选择器不仅作用域该选择器还作用与该选择器的子选择器
比如:
head中style:
p {
color: red;
}
body中:
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩</p>
效果:所有文字,不管是p内的还是span内的都是红色的。
(二)选择器的优先级
1、各个选择器的优先级


上述的效果是: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的权重最高。
网友评论