4.css三大特性

来源：互联网发布：淘宝怎么开网店步骤编辑：程序博客网时间：2024/06/06 21:40

1.层叠性

定义：当多个样式给同一个（同一类）标签时，样式发生冲突时，按照浏览器解析顺序从上到下决定，总是执行后边代码（后边代码层叠前面代码）。

<head>    <style type="text/css">        .box2{            font-size:200px;            color:blue;        }        .box{            font-size:60px;            color:red;                           显示结果    </style></head><body>    <div class="box box2">指南</div></body>

2.继承性

※特点：继承性发生的前提是有包含（嵌套关系）

文字颜色可以继承；
文字大小可以继承；
字体可以继承；
字体粗细可以继承；
文字风格（斜体，正常）可以继承；
行高可以继承；

总结：文字的所有属性都可继承。
特殊情况：

h系列不能继承文字大小（h1实际大小为文字大小的2倍，h2继承的为1.5倍）
a标签不能继承颜色。

<head>    <style type="text/css">        .father{            font-size:200px;            color:blue;        }                      </style></head><body>    <div class="father"><p>指南</p></div></body>

3.优先级

权重顺序：默认样式 0 < 标签选择器 1 < 类选择器 10 < id选择器 100 < 行内样式 1000

<head>    <style type="text/css">        #con{            font-size:100px;            color:pink;        }        .box{            font-size:60px;            color:green;           }        div{            font-size:80px !important;            color:red !important;           }                   </style></head><body>    <div class="box" id="con" style="font-size:12px; color:yellow;">指南</div></body>

优先级特点：
（1）继承的权重为0（当标签自身赋予了样式时，则不继承父级元素样式。）

<head>    <style type="text/css">        .father{            font-size:60px;            color:red;        }         p{            font-size:20px;            color:blue;        }        #box{                font-size:500px;            color:green;        }                             </style></head><body>    <div class="father" id="box"><p>指南</p></div></body>

（2）权重会叠加

<head>    <style type="text/css">        p.son{            font-size:120px;            color:red;        }         p{            font-size:20px;            color:blue;        }        .father #baby{ 权重最重，为显示结果                font-size:12px;            color:orange;        }               .father .son{                font-size:80px;            color:pink;        }               .son{                font-size:500px;            color:green;        }                             </style></head><body>    <div class="father">        <p class="son" id="baby">指南</p>    </div></body>

阅读全文

0 0