css优先级

不合理性，论证：

CODE:

<style type="text/css">

<!--

.class1 span#id3{font-size:14px}

#id1 .class2 .class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号？</span> </p>

</div>

#id1 .class2 .class3{font-size:12px}

可以看到span#id3并不比#id1高出一个级别。

无结果开始原则三

如果比较结果，选择符从最高级开始都对应，级别上的数量也相同，则开始比较谁更具体。

例子：

CODE:

<style type="text/css">

<!--

#id1 .class2 span{font-size:14px}

.class1 #id3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号？</span> </p>

</div>

#id1 .class2 span{font-size:14px}

当然也可以理解为在原则二层层比较中“少一个层级的样式”，缺少的那个层级没有“层级较多的样式”多出的那个层级的级别高。（绕口令）

*将原则四归入原则三的不合理性，论证：

CODE:

<style type="text/css">

<!--

.class2 .class3{font-size:14px}

span.class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号？</span> </p>

</div>

上例中可以看出，如果将原则四并入原则三，将span.class3看作两层，那么应该和.class2 .class3层级一样多，那么应该显示12px,而事实不是这样。

最终对决原则四

如果还分不出结果，则开始原则四的比较：

例子1：

CODE:

<style type="text/css">

<!--

.class1 p.class2 .class3{font-size:14px}

.class1 .class2 .class3{font-size:12px}

-->

</style>

<div id="id1" class="class1">

<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号？</span> </p>

</div>

.class1 p.class2 .class3{font-size:14px}