一、层叠性
- 当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。
- 和标签调用选择器的顺序没有关系。
<style type="text/css"> .box{ font-size: 20px; color: red; } .box2{ font-size: 30px; color: blue; } </style> </head> <body> <div class="box box2">当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。</div> </body>
二、 继承性
-
继承性发生的前提是包含（嵌套关系）
-
总结：文字的所有属性都可以继承。文字颜色color可以继承；文字大小font-size可以继承；字体font-family可以继续；字体粗细font-weight可以继承；文字风格font-style可以继承；行高lineheight可以继承
-
特殊情况：h系列（标题）不能继承文字大小。a标签（超链接）不能继承文字颜色。
<style type="text/css"> .father{ color: red; font: 30px microsoft yahei; } </style> </head> <body> <div class="father"> <p class="son">继承性发生的前提是包含（嵌套关系）</p> <h1>h系列不能继承文字大小。</h1> <a href="#">a标签不能继承文字颜色。</a> </div> </body>
三、优先级
-
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
-
优先级特点
①继承的权重为0
<style type="text/css"> div{ color: red !important; } .box{ color: green; font-size: 20px; } #content{ color: pink; font-size: 30px; } </style> </head> <body> <div class="box" id="content" style="font-size: 10px;color: yellow;">字体默认黑色</div>
②权重会叠加
<style type="text/css"> p{ font-size: 1px; color: red; } .son{ font-size: 10px; color: blue; } p.son{ font-size: 11px; color: yellow; } .father .son{ font-size: 20px; color: pink; } .father #baby{ font-size: 110px; color: orange; } </style> </head> <body> <div class="father"> <p class="son" id="baby">权重会叠加</p> </div> </body>