浅谈CSS中的继承性,特殊性,层叠性和重要性

所属分类: 网页制作 / CSS 阅读数: 375
收藏 0 赞 0 分享

1. 继承性

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于 p 标签,这个颜色设置不仅应用 p 标签,还应用于 p 标签中的所有子元素文本,这里子元素为 span 标签。

XML/HTML Code复制内容到剪贴板
  1. p{color:red;}   
  2. <p>三年级时,我还是一个<span>胆小如鼠</span>的小男孩。</p>  
结果 p 中的文本与 span 中的文本都设置为了红色。但注意有一些 css 样式是不具有继承性的。如 border:1px solid red;
CSS Code复制内容到剪贴板
  1. p{border:1px solid red;}  

在上面例子中它代码的作用只是给 p 标签设置了边框为1像素、红色、实心边框线,而对于子元素 span 是没用起到作用的。

2. 特殊性

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

XML/HTML Code复制内容到剪贴板
  1. p{color:red;}   
  2. .first{color:green;}   
  3. <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小男孩。</p>  

p 和 .first 都匹配到了 p 这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种 css 样式的,权值高的就使用哪种 css 样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

XML/HTML Code复制内容到剪贴板
  1. p{color:red;} /*权值为1*/   
  2. p span{color:green;} /*权值为1+1=2*/   
  3. .warning{color:white;} /*权值为10*/   
  4. p span.warning{color:purple;} /*权值为1+1+10=12*/   
  5. #footer .note p{color:yellow;} /*权值为100+10+1=111*/   

注意:还有一个权值比较特殊–继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

3. 层叠性

我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

如下面代码:

CSS Code复制内容到剪贴板
  1. p{color:red;}   
  2. p{color:green;}   

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

4. 重要性

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

如下代码:

XML/HTML Code复制内容到剪贴板
  1. p{color:red!important;}   
  2. p{color:green;}   
  3. <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小男孩。</p>  

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

注意:!important要写在分号的前面

这里注意当网页制作者不设置 css 样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住 !important 优先级样式是个例外,权值高于用户自己设置的样式。

以上这篇浅谈CSS中的继承性,特殊性,层叠性和重要性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多