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

p.tree的特性是1+1+10=12，(两个html选择器，一个class选择器)

#baobab的特性是100(1个ID选择器)

body

#content .alternative

p的特性是112(两个html选择器，一个ID选择器，一个类选择器)

按照上面的规则，div

p.tree的特性比div p高，body #content .alternative p又比它们两个都高。

3，css优先级的四大原则：

原则一：继承不如指定

样式是继承来的永远不如具体指定的优先级高

例子1：

CODE:

*{font-size:20px}

.class3{ font-size: 12px; }

–>

我是多大字号？

运行结果：.class3{ font-size: 12px; }

例子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)，同级级别&数量一致时，再看下一级属性。