css的优先级机制[总结]

ID：8804591

大小：65.13 KB

页数：7页

时间：2018-04-08

资源描述：

《css的优先级机制[总结]》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、样式的优先级多重样式（MultipleStyles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）Externalstylesheet<（内部样式）Internalstylesheet<（内联样式）Inlinestyle 有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下： /* 内部样式 */ h3{color:green;}

2、- 外部样式 style.css -->

测试！

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

3、"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 */

4、 color:#FF0;/*黄色*/ } red em red

red

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

color

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