CSS的优先级机总制结].docxVIP

样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet （内部样式）Internal style sheet （内联样式）Inline style?有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下：head????style type=text/css??????/*?内部样式?*/??????h3{color:green;}????/style?????!--?外部样式?style.css?--????link?rel=stylesheet?type=text/css?href=style.css/????!--?设置：h3{color:blue;}?--/headbody????h3测试！/h3/body?选择器的优先权??解释：1.? 内联样式表的权值最高 1000；2.? ID 选择器的权值为 1003.? Class 类选择器的权值为 104.? HTML 标签选择器的权值为 1?利用选择器的权值进行计算比较，示例如下：html??head????style type=text/css????????#redP?p?{?????????????/*?权值?=?100+1=101?*/?????????????color:#F00;??/*?红色?*/????????}?????????#redP?.red?em?{?????????????/*?权值?=?100+10+1=111?*/?????????????color:#00F;?/*?蓝色?*/?????????}?????????#redP?p?span?em?{?????????????/*?权值?=?100+1+1+1=103?*/?????????????color:#FF0;/*黄色*/????????}????/style??/head??body?????div?id=redP????????p?class=redred???????????spanemem?red/em/span????????/p????????pred/p?????/div??/body/html结果：em?标签内的数据显示为蓝色。?CSS?优先级法则：A? 选择器都有一个权值，权值越大越优先；B? 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；C? 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；D? 继承的CSS 样式不如后来指定的CSS 样式；E? 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：html??head????style type=text/css?????#redP?p{????????/*两个color属性在同一组*/????????color:#00f?!important;?/*?优先级最大?*/????????color:#f00;?????}????/style? /head? body?????div?id=redP???????pcolor/p???????pcolor/p?????/div? /body/html结果：在Firefox 下显示为蓝色；在IE? 6 下显示为红色；?使用脚本添加样式当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。代码如下：htmlhead??title?demo?/title??meta?name=Author?content=xugang?/???!--?添加外部CSS?样式?--??link?rel=stylesheet?href=styles.css?type=text/css?/??!--?在外部的styles.css文件中，代码如下：???????h3?{color:blue;}??--???!--?使用javascript?创建内部CSS?样式?--??script type=text/javascript??!--????(function(){????????var?agent?=?window.navigator.userAgent.toLowerCase();????????var?is_op?=?(agent.indexOf(opera)?!=?-1);????????var?is_ie?=?(agent.indexOf(msie)?!=?-1)??document.all??!is_op;????????var?is_ch?=?(agen