上一篇文章介绍了如何利用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. Oracle 11g系统自己主动收集统计信息的一些知识

    在11g之前,当表的数据量改动超过总数据量的10%,就会晚上自己主动收集统计信息.怎样推断10%.之前的帖子有研究过:oracle自己主动统计信息的收集原理及实验.这个STALE_PERCENT=10 ...

  2. Matlab画图-非常具体,非常全面

    Matlab画图 强大的画图功能是Matlab的特点之中的一个,Matlab提供了一系列的画图函数,用户不须要过多的考虑画图的细节,仅仅须要给出一些基本參数就能得到所需图形,这类函数称为高层画图函数. ...

  3. RHEL 7特性说明(七):编译程序及工具

    转载自:RedHat https://access.redhat.com/documentation/zh-CN/Red_Hat_Enterprise_Linux/7/html/7.0_Release ...

  4. careercup-C和C++ 13.8

    13.8 编写一个智能指针类.智能指针是一种数据类型,一般用模板实现,模拟指针行为的同时还提供自动垃圾回收机制.它会自动记录SmartPointer<T*>对象的引用计数,一旦T类型对象的 ...

  5. vmware安装 ios10.8 过程

    前言:由于mac笔记本太贵,并且对于用thinkpad 习惯的我,实在是不想买mac,没办法,只能在win7下面使用vmware 安装mac虚拟机了.但是ios的版本一直变,vmware也一直在升级, ...

  6. Microsoft Office Visio Professional 2007密钥

    Microsoft Office Visio Professional 2007 产品密钥: W2JJW-4KYDP-2YMKW-FX36H-QYVD8

  7. docker on Mac

    贡献一篇: 云主机可以选择操作系统镜像快速创建主机,这比虚拟机更便捷了,我们本地也可以这么做了,因为有了 Docker 这个东西.它依赖于 LXC(Linux Container),能从网络上获得配置 ...

  8. JavaScript学习总结一(String对象的用法)

    javascript String对象的常用API 1:indexOf indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果没有找到匹配的字符串则返回 -1.注意: inde ...

  9. Win7:“找不到该项目”错误解决大法

    1.将以下代码复制粘贴到一新建的txt记事本文档中,并另存为del.bat文件(或者你喜欢的名字),注意扩展名为批处理文件bat. DEL /F /A /Q \\?\%1RD /S /Q \\?\%1 ...

  10. FontAwesome 奥森图标的学习

    很早之前,就看到大家在使用代码做出很漂亮的图标,但是觉得需求不是很大,所以就没有看,但是技多不压身,这次有时间来学习下. FontAwesome官方网站 1,下载文件包 里面有两个文件夹,css 和 ...