css的优先级的相关内容

之前也遇到过有关css优先级方面的问题，忽然发现之前了解不够具体，知道了一些新的知识，还有不少不足，但愿你们批评指正。

css样式链接到html的方式可分为内部和外部；内部样式有行内样式和嵌入样式两种，外部样式分为导入式和连接式两种。

咱们先来探讨这四种方式的html编译的前后顺序：

head：

<link rel="stylesheet" type="text/css" href="red.css">
<style>

@import url(blue.css);
.top{color: yellow;}
</style>

 

body：
<div style="color:green;" class="top" >

 toptop

</div>

实现的色彩是绿色，即行间的样式是最优先

通过实验验证，另外三种，根据编译的顺序是从上到下规则，实现的效果是最下面的那个；

在html内部的样式分布，是咱们平时常常用到的，考虑到的。

首先import！，它是css1定义的语法，可是在IE6中是不能实现的，这就是IE6的几大hack之一，不过在别的浏览器中优先级是最大的。

接着咱们再来聊一下，平时用的css语法的优先级（即他们对应的权重）

内联样式（即行内样式）：1000

id选择器：100

类选择器（class）：10

元素选择器（p,span）：1

举个简单的例子：

head：

<style>
.top{color: yellow;}
.top span{ color:blue;}
.top span.main{color:red;}
</style>

body：

<div class="top">
<span class="main">toptop</span>
</div>

显示的字体颜色为红色，即遵照下面原则，数字越大，优先级越大

.top 10

.top span  10+1

.top span.main 10+1+10