以前也遇到过有关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
转载于:https://www.cnblogs.com/shirely-2014/p/4109042.html
相关资源：JAVA上百实例源码以及开源项目