层叠性、继承性、优先级。
层叠性款式抵触：是指统一个元素拥有两个差别属性值的不异款式。
层叠性的感化：处理款式抵触。
使一个款式笼盖（层叠）另一个款式，使元素只选择一种款式停止显示。
层叠性原则：款式抵触，遵照就近原则，哪个款式离构造近，就施行阿谁款式。
<style> div { color:red; }</style><body> <div> CSS的三大特征之一：层叠性。 </div></body>
运行成果
<style> div { color:red; } div { color: blue; }</style><body> <div> CSS的三大特征之一：层叠性。 </div></body>
运行成果
<style> div { color:red; } div { color: blue; }</style><body> <div style='color:orange;'> CSS的三大特征之一：层叠性。 </div></body>
运行成果
继承性子标签会继承父标签的某些款式，如文本属性、字体属性、颜色属性、字体行高档。
也就是说某些款式在父标签中添加后就不需要在子标签中再次添加该款式，能够削减代码冗余。
<style> /* 继承性 */ .divJC { /* 12px：字体大小 24px：行高 */ font: 12px/24px 'Microsoft YaHei'; color: pink; }</style><body> <div class="divJC"> CSS的继承性。 <p>CSS的继承性。</p> </div></body>
运行成果
优先级统一个元素指定多个选择器，就会产生优先级，优先显示权重高的款式。
被选择器不异时，施行层叠性。被选择器不不异时，则按照选择器权重来施行。权重品级挨次：
继承 或者 *（全局选择器）：0,0,0,0 < 元素选择器：0,0,0,1 < 类选择器或伪类选择器：0,0,1,0 < ID选择器 ：0,1,0,0 < 行内款式：1,0,0,0 < 在属性值后加：“！Important”：无限大。
留意事项：
继承的权重为零。权堆叠加：复合选择器会有权堆叠加，但仅在该权重区间停止叠加，永久不会有进位情况。<style> /* 优先级*/ /*div父标签的颜色属性，子标签继承权重为零*/ div{ color: blue; } /*元素标签权重为0,0,0,1*/ span { color:black; } /*类选择器权重为0,0,1,0*/ .divYXJ { font-size: 20px; color: brown; } /*ID选择器权重为0,1,0,0*/ #Yxj { color: aquamarine; }</style><body> <div> CSS的三大特征之优先级：继承或全局选择器*（0,0,0,0）。<br> <span>CSS的三大特征之优先级：元素选择（0,0,0,1）。</span><br> <span class="divYXJ">CSS的三大特征之优先级：类选择器或伪类选择器（0,0,1,0）。</span><br> <span class="divYXJ" id="Yxj">CSS的三大特征之优先级：ID选择器（0,1,0,0）。</span><br> <span class="divYXJ" id="Yxj" style="color:cadetblue ;">CSS的三大特征之优先级：行内款式（1,0,0,0）。</span><br> <span class="divYXJ" id="Yxj" style="color:cadetblue ;">CSS的三大特征之优先级：!important（无限大）。</span> </div></body>
运行成果
<style> /* 优先级*/ /*div父标签的颜色属性，子标签继承权重为零*/ div{ color: blue; } /*元素标签权重为0,0,0,1*/ span { color:black !important; } /*类选择器权重为0,0,1,0*/ .divYXJ { font-size: 20px; color: brown; } /*ID选择器权重为0,1,0,0*/ #Yxj { color: aquamarine; }</style><body> <div> CSS的三大特征之优先级：继承或全局选择器*（0,0,0,0）。<br> <span>CSS的三大特征之优先级：元素选择（0,0,0,1）。</span><br> <span class="divYXJ">CSS的三大特征之优先级：类选择器或伪类选择器（0,0,1,0）。</span><br> <span class="divYXJ" id="Yxj">CSS的三大特征之优先级：ID选择器（0,1,0,0）。</span><br> <span class="divYXJ" id="Yxj" style="color:cadetblue ;">CSS的三大特征之优先级：行内款式（1,0,0,0）。</span><br> <span class="divYXJ" id="Yxj" style="color:cadetblue ;">CSS的三大特征之优先级：!important（无限大）。</span> </div></body>
无限大运行成果显示
今天就学到那吧，下次继续，不克不及再申明天了，还不晓得明天能不克不及及时进修。加油！
发表评论