样式的优先级：

（内联样式表[嵌入式样式]）>（内部样式表）>（外部样式表）

经过测试动手测试发现有个（唯一的）例外 情况：当引用外部样式在内部样式表（非嵌入式样式）的后面时，外部样式会覆盖内部样式 。

测试1（插入顺序：内部样式；外部样式）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>case</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 500px;
            height: 500px;

            background-color: black;/*黑色*/
        }
    </style>
    <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 -->
</head>
<body>
    <div id="container"></div><!-- 结果：蓝色，覆盖-->
</body>
</html>

测试2（插入顺序：嵌入样式；外部样式）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>case</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 500px;
            height: 500px;
        }
    </style>

</head>
<body>
    <div id="container" style="background-color: red"</div><!-- 结果：红色，没有覆盖-->
</body>
<link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 -->
</html>

测试3（外部样式；外部样式）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 50px;
            height: 50px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="CaseTest.css"><!-- background-color: red;-->
    <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- background-color: blue; -->
</head>
<body>
    <div id="container"></div><!-- 结果：blue-->
</body>
</html>

测试4（外部样式；嵌入样式）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>（内联样式表[嵌入式样式]）>（外部样式表）</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 500px;
            height: 500px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 -->
</head>
<body>
    <div id="container" style="background-color: red"></div><!-- 结果：红色-->
</body>
</html>

CSS的优先级的更多相关文章

  1. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  2. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  3. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  4. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  5. 转载css层级优先级。

    解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...

  6. CSS的优先级规则

    CSS的优先级规则有两类 1.位置群组规则 最高优先级为元素内嵌的style样式,如<div style=” “></div> 次高优先级为html头部中的<style& ...

  7. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  8. css的优先级以及!important的使用

    CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤).起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目 ...

  9. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  10. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

随机推荐

  1. Html与css基础

    1.html的定义 (1).html:超文本标记语言(HyperText Markup Language),它主要包括"头"(Head)和"主体"(Body)两 ...

  2. HTML与CSS入门——第十章 创建用于Web上的图像

    知识点: 1.选择图像软件的方法 2.准备用于网上的照片的方法 3.创建标题和按钮的方法 4.减少图像中颜色数量的方法 5.创建透明图像的方法 6.创建平铺背景的方法 7.创建Web动画的方法 10. ...

  3. WebApi2官网学习记录--- Authentication与Authorization

    Authentication(认证)   WebAPI中的认证既可以使用HttpModel也可以使用HTTP message handler,具体使用哪个可以参考一下依据: 一个HttpModel可以 ...

  4. iOS import导入pod第三方库不提示问题

    pod 导入第三方库后,使用import 不提示第三方库头文件. 解决办法: 选择target -> BuildSettings -> search Paths 下的 User Heade ...

  5. Objective-C 字典、可变字典

    字典相当于c++ stl中的map 字典NSDictionary #import <UIKit/UIKit.h> #import "AppDelegate.h" int ...

  6. C#总结（一）

    学C#也有两年多了,发现如果不总结一下,很多C#的知识都会忘掉,所以希望写这系列的文章来总结一下C#的基础知识.如果有写错或者不足的地方,希望可以提出纠正. C#可以说是依附在.NET Framewo ...

  7. C 中va_list,va_arg,va_start,va_end usage

    1.在学习c语言,难免会遇到多参函数,刚好c中也提供了一些机制:宏函数 #ifdef _M_ALPHA typedef struct { char *a0; /* pointer to first h ...

  8. 用UseMiddleware扩展方法注册中间件类

    用UseMiddleware扩展方法注册中间件类 .NET Core中间件的注册和管道的构建(2)---- 用UseMiddleware扩展方法注册中间件类 0x00 为什么要引入扩展方法 有的中间件 ...

  9. UML--建模

    建模公式 这种精华的东西,一定是值得研读和实践的! myself:人,事,物,规则. 人,业务主角.业务工人.参与者.如果应用到教务系统中,就是管理员,主任,老师的关系. 事,业务用例,系统用例. 物 ...

  10. bzoj1615 [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机

    Description Farmer John新买的干草打包机的内部结构大概算世界上最混乱的了,它不象普通的机器一样有明确的内部传动装置,而是,N (2 <= N <= 1050)个齿轮互 ...