转自：http://topic.csdn.net/u/20100130/01/db48b639-909d-4f7d-996c-a5adad5a4276.html
浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式...
其中样式表又有...
类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器，所以完整的层叠优先级是...
浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级...
还有一点要注意...派生选择器只对容器类标记中的标记起作用...
重给你写一个例子，这个比较清楚...
HTML code
<html>
<head>
<title></title>
<style type="text/css">
div { color: #00FF00 }
.a1 { color: #0000FF }
.a1 div { color: #00FFFF }
.a2 { color: #FF0000 }
#a2 { color: #FFFF00 }
#a2 div { color: #FF00FF }
</style>
</head>
<body>
<div>我是绿色，内部样式表优先于浏览器缺省</div>
<div class="a2">我是红色，类选择器优先于内部样式表</div>
<div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>
<div class="a1">
<span>我是蓝色，类选择器优先于内部样式表</span>
<div>我是青色，类派生选择器优先于类选择器</div>
<div class="a2">我还是青色，类派生选择器优先于所有类选择器</div>
<div id="a2">
<span>我是黄色，ID选择器优先于类派生选择器</span>
<div>我是紫色，ID派生选择器优先于类派生选择器</div>
<div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>
<div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>
<div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
CSS 样式应用优先级详解 CSS 样式应用优先级是指在CSS样式规则应用时的顺序和优先级。该优先级规则决定了哪些样式规则将被应用于HTML元素。...理解CSS样式应用优先级可以帮助我们更好地控制CSS样式的应用。
查找一些教材中（w3schools等），只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知...
内联样式这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如： 复制代码代码如下:<style type=”text/css”> div{color:blue;} //内部样式</style><link rel=”stylesheet” type=...
CSS 规则的优先级是Web前端开发人员必须理解的一个概念，我们常用的添加样式的方法有4种。
内联样式这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如： CSS Code复制内容到剪贴板 <style type=text/css> div{color:blue;} //内部样式 </style> <link rel=...
一、基础选择器 css基础选择器有标签选择器、类选择器、id选择器、通用选择器 1.标签选择器 每个html页面都由很多个标签组成，通过标签选择器可以对某类标签...则可以为对应的class设置样式 复制代码代码如下: error{
CSS的调用方式一共有4种，分别是：行内样式，内嵌式，link链接式，@import导入式，在同级的前提下，我们可以按样就近原则来理解他们的优先级，则越前定义的样式，会被后面的样式覆盖。
层叠指的是样式的优先级，当产生冲突时以优先级高的为准。1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）2. id选择符>（伪）类选择符>元素选择符3. 权重相同时取后面定义的样式 以下是一段经典的...
... ## 知识点梳理 - 选择器的权重和优先级 ...1. 代表内联样式，如`style="xxx"`，权值为 1000； 2. 代表 ID 选择器，如`#content`，权值为 100； 3. 代表类、伪类和属性选择器，如`.content`、`:ho
1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择器 2.1.2 类别选择器 ...
3. CSS 基础：掌握 CSS 样式规则，能够书写规范的 CSS 样式代码，掌握 CSS 字体样式及文本外观属性，掌握 CSS 复合选择器的使用，理解 CSS 层叠性、继承性与优先级。 4. 盒子模型：掌握盒子的相关属性，能够制作...
canvas 、 svg 、 webGL 你是如何理解 HTML 语义化的，有什么好处 前端需要注意哪些 SEO ?... rem 的根节点样式在什么时候设置？ position 有哪些？他们的定位原点是什么？ 媒体查询⽤ css 好还是⽤
层叠可以简单地理解为冲突的解决方案。 什么是冲突？ 就是同个元素在使用不同的选择器选择中后添加相同的样式。 优先级规则可以表述为 行内样式>ID样式>类别样式>标记样式 在复杂的页面中，某一个元素有可能会从很多...
一、全浏览器支持的css选择器（由于很好理解，demo省略）1.* *通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的...
23.1 菜单设计原则和样式 437 23.2 菜单和菜单事件 438 23.2.1 创建菜单 438 23.2.2 处理菜单事件 443 23.3 快捷菜单 449 23.4 windows通用对话框 453 23.5 增强wpf应用程序的响应能力 456 第23章快速参考 ...
最近开发项目的时候因为应用了大量的CSS样式导致某些关于样式的优先级出现了问题，于是又回过头去翻别人的文章和W3C上关于CSS优先权重的计算方法，关于代码的测试，有兴趣的朋友可以按照计算方式单独编写代码进行...