HTML将div层级升到最⾼,CSS层级嵌套关系详解
1，选择器⼀样的情况下后⾯的会覆盖前⾯的属性。⽐如：
p { color: red; }
p { color: blue; }
p元素的元素将是蓝⾊，因为遵循后⾯的规则。
2，使⽤嵌套选择器
遵循嵌套选择器的实际特性原则。
实际特性计算公式：基本的，使⽤ID选择器的值是100，使⽤class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。⽐如：
p的特性是1(⼀个html选择器)
div
p的特性是2(两个html选择器)
.tree的特性是10(1个class选择器)
div
<的特性是1+1+10=12，(两个html选择器，⼀个class选择器)
#baobab的特性是100(1个ID选择器)
body
#content .alternative
p的特性是112(两个html选择器，⼀个ID选择器，⼀个类选择器)
按照上⾯的规则，div
<的特性⽐div p⾼，body #content .alternative p⼜⽐它们两个都⾼。
3，css优先级的四⼤原则：
原则⼀：继承不如指定
样式是继承来的永远不如具体指定的优先级⾼
例⼦1：
CODE:
*{font-size:20px}
.class3{ font-size: 12px; }
–>
我是多⼤字号？
运⾏结果：.class3{ font-size: 12px; }网页设计html代码大全继承关系
例⼦2：
CODE:
#id1 #id2{font-size:20px}
.
class3{font-size:12px}
–>
我是多⼤字号？
运⾏结果：.class3{
font-size: 12px; }
注意：后⾯的⼏⼤原则都是建⽴在“指定”的基础上的。
原则⼆：
#ID >.class >标签选择符
例⼦：
CODE:
#id3 { font-size: 25px; }
.
class3{ font-size: 18px; }
span{font-size:12px}
–>
我是多⼤字号？
运⾏结果：#id3 { font-size: 25px; }
原则三：越具体越强⼤
解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越⾼。CODE:
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
–>
我是多⼤字号？
运⾏结果：.class1 .class2 .class3{font-size: 25px;}
原则四：标签#id >#id ; 标签.class >.class
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
–>
我是多⼤字号？
我是多⼤字号？
运⾏结果：span#id3{font-size:18px} | span.class3{font-size:18px}
*四⼤原则的权重
四⼤原则的权重就是: 原则⼀ >原则⼆ >原则三 >原则四
解释：
⾸先遵循原则⼀
有指定开始使⽤下⾯的原则，⽆指定则继承离他最近的定义。
然后开始原则⼆
1、⽐较最⾼优先级的选择符
例⼦：
CODE:
#id3{font-size:18px}
.class1 .class2 .class3{font-size:12px}
.
class3{font-size:18px}
div p span{font-size:12px}
–>
我是多⼤字号？
运⾏结果：#id3{font-size:18px}
删掉上⾯CSS中的前两⾏可以得出，如果没有最⾼级别的#ID会寻.class 即使后⾯的CSS按照“原则⼆”描述的再具体也⽆法突破原则⼀。
2、如果两条CSS的如果最⾼选择符优先级⼀样，则⽐较他们的数量
.class1 #id3{font-size:12px}
.class1 .class2 #id3{font-size:14px}
–>
我是多⼤字号？
运⾏结果:.class1 .class2 #id3{font-size:14px}
3、如果最⾼选择符级别和数量都⼀样，则按照原则⼆⽐较他们下⼀级，以此类推。
#id1 .class2 .class3{font-size:14px}
div .class2 #id3{font-size:12px}
–>
我是多⼤字号？
[color=Orange]
运⾏结果:#id1 .class2 .class3{font-size:14px}
*最⾼级选择符的位置没有⾼下之分，论证：[code]CODE:
#id1 .class2 .class3{font-size:18px}
.class1 #id2 .class3{font-size:14px}
.
class1 .class2 #id3{font-size:12px}
–>
我是多⼤字号？
上例中更换3条CSS的先后可以得出，哪条位于最后，哪条起作⽤。说明他们的级别⼀样，后⾯的将覆盖前⾯的。*将原则四归⼊原则⼆的不合理性，论证：
CODE:
.class1 span#id3{font-size:14px}
#id1 .class2 .class3{font-size:12px}
–>
*最⾼级选择符的位置没有⾼下之分，论证：[code]CODE:
#id1 .class2 .class3{font-size:18px}
.class1 #id2 .class3{font-size:14px}
.class1 .class2 #id3{font-size:12px}
–>
我是多⼤字号？
上例中更换3条CSS的先后可以得出，哪条位于最后，哪条起作⽤。说明他们的级别⼀样，后⾯的将覆盖前⾯的。*将原则四归⼊原则⼆的不合理性，论证：
CODE:
.class1 span#id3{font-size:14px}
#id1 .class2 .class3{font-size:12px}
–>
–>
我是多⼤字号？
上例中可以看出，如果将原则四并⼊原则三，将span.class3看作两层，那么应该和.class2
.class3层级⼀样多，那么应该显⽰12px,⽽事实不是这样。
最终对决原则四
如果还分不出结果，则开始原则四的⽐较：
例⼦1：
CODE:
.class1 p.class2 .class3{font-size:14px}
.class1 .class2 .class3{font-size:12px}
–>
我是多⼤字号？
.class1 p.class2 .class3{font-size:14px}
先看是否描述到该元素，再看最⾼级别的等级和数量(#id>class，html#id>#id)，同级级别&数量⼀致时，再看下⼀级属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。