html学习之继承小结

298 查看

继承
它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
但注意有一些css样式是不具有继承性的。如border:1px solid red;

p{
    color:red;
    border:1px
    solid red;
}

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

上面例子对于子元素span是没用起到作用的。

特殊性标签的权值
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为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/

注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,处于最后面的css样式会被应用。

p{color:red;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

重要性
为某些样式设置具有最高权值,可以使用!important来解决

p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

当网页制作者不设置css样式时 浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,
但 !importan t优先级样式是个例外,权值高于用户自己设置的样式。