上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先、属性、兄弟等元素穿件选择器选择元素。

本篇文章将讨论3中机制之间的关系:特殊性、继承和层叠

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?

我们来看一下面的代码:

<style type="text/css">
    p{    color:red;   }
    .first{    color:green;   }
</style><p class="first">这是第一个段落</p>
在样式中p.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。那接下来讲解权值的规则:标签的权值为:1;类的权值为:10;ID的权值为最高:100;
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

重要性

有时某个声明可能非常重要,超过了其他声明。CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标示。
<style type="text/css">
    p{
       color:red!important;
     }
    p{
       color:green;
     }
</style>
<p class="first">这是第一个段落</p>        

这时p段落中的文本会显示的red红色。
继承

特殊性对于理解如何向文档应用声明很重要,同样还有个很重要的概念就是继承,基于继承机制,样式不仅应用到指定的元素,还会应用到其后代元素。

<script type="text/css">
    p{
        color:red;
    }
</script>
<p>这是一个<span>悲伤地故事</span></p>
这里span是p的子元素。那么p的颜色改变那么其span的颜色也会相应改变;注:有些CSS样式是不具有继承性的。例如border;
<script type="text/css">
    p{
        border:1px solid red
    }
</script>
<p>这是一个<span>悲伤地故事</span></p>
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。一般的,大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承。

层叠性

<script type="text/css">
  p{    color:red;   }
  p{    color:green;   }
</script>
<p class="first">这是一个<span>悲伤的故事</span></p>
最后 p中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。所以css样式优先级就不难理解了:
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。


 
												

Web前端新人笔记之CSS结构和层叠的更多相关文章

  1. Web前端新人笔记之CSS字体

    本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但 ...

  2. Web前端新人笔记之CSS值和单位

    数字 颜色——命名颜色 在Css2.1中规范定义了17个颜色名.包括html4.0中定义的16个颜色及外加一个橙色: <h1 style="color=aqua">aq ...

  3. Web前端新人笔记之文本属性

    前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...

  4. Web前端新人笔记之jquery选择符

    jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...

  5. Web前端新人笔记之了解Jquery

    与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...

  6. Web前端新人笔记之height、min-height的区别

     浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素 ...

  7. Web前端新人笔记之jquery入门

    本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jq ...

  8. Web前端新人笔记之HeightCharts基础

    通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功 ...

  9. web前端开发笔记(1)

     一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...

随机推荐

  1. ListOrderedMap

    要有序能够用List,要便于查找能够用Map,那既要有序又便于查找呢? 近期我就遇到了这样一个问题.Java没有给我们提供现成的类.我们全然能够自己开发个类继承List和Map(Java原来就有不能够 ...

  2. Delphi静态加载DLL和动态加载DLL示例

    下面以Delphi调用触摸屏动态库xtkutility.dll为例子,说明如何静态加载DLL和动态加载DLL. 直接上代码. 1.静态加载示例 unit Unit1; interface uses W ...

  3. [RxJS] just, return

    Sometime, we migth just want to return a object which wrap into Observable. You can use 'just' or  ' ...

  4. [ZZ]良好的编码习惯

    1.以简洁明了的方式编写C程序.通常把这种程序编写方法称为KIS(“保持简洁”).不要用古怪的方式编写程序. 2.阅读所有的C版本手册.经常参考所用的C版本的手册能了解该版本的丰富的特点,并正确地使用 ...

  5. VBScript

    VBScript then PrintWMIErrorthenExit Err.Description, Err.Number else ifnot boolCathiMode then wscrip ...

  6. [转帖]2010.10.7google北大笔试题回忆

    1.1关于IP协议那个正确 A IP是TCP上层协议B IP协议是应用层协议C由于两个属于同一层协议,他们之间可以直接通信DIP协议不提供可靠的通信 1.2 关于内存正确的是 A内存的存取速度不能低于 ...

  7. APP运营干货分享

    从移动互联网市场总监岗位出发,从几个方面来阐述移动互联网部门如何制定一份运营推广策划案,至于关于移动互联网,移动电商是大趋势这些虚的.空泛的文字,不展开说了. 一.竞品分析 1.选择竞品,做好定位(选 ...

  8. C++的4种编程范型

    基于过程procedural-based 基于对象object-based 面向对象object-oriented 泛型技术generics

  9. rails 项目部署中 nginx 报错及解决方法

    错误1 1. 报403错误,是因为启动nginx的用户默认是nobody,没有对项目目录的访问权限. user myName; worker_processes ; 错误2 2. 报404错误,是因为 ...

  10. hadoop的相关资料链接

    hadoop的资料整理博客 http://www.itpub.net/thread-1588509-1-1.html