CSS 的优先级机制

样式的优先级 多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。 一般情况下，优先级如下： （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style 立即学习 “ 前端免费学习笔记（深入） ”； 有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 示例如下：

测试！

选择器的优先权 解释： 1.  内联样式表的权值最高 1000； 2.  ID 选择器的权值为 100 3.  Class 类选择器的权值为 10 4.  HTML 标签选择器的权值为 1 利用选择器的权值进行计算比较，示例如下：

redem red

red

结果： 标签内的数据显示为蓝色。 CSS 优先级法则： A  选择器都有一个权值，权值越大越优先； B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置； C  创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式； D  继承的CSS 样式不如后来指定的CSS 样式； E  在同一组属性设置中标有“!important”规则的优先级最大；示例如下：

color

color

结果：在Firefox 下显示为蓝色；在IE  6 下显示为红色； 使用脚本添加样式 当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。代码如下：

在IE中我是绿色，非IE浏览器下我是蓝色！

结果：在Firefox / Chrome / Safari / Opera 中，文字都是蓝色的。而在IE 浏览器中，文字却是绿色的。 附加 在IE 中添加样式内容的JavaScript 代码： var s=document.createElement("style");var head=document.getElementsByTagName("head").item(0);var link=document.getElementsByTagName("link").item(0);head.insertBefore(s,link);/* 注意：在IE 中，虽然代码是将