关于css问题继承、权值问题

浏览数：28 / 时间：2015年06月09日

关于css问题：

一、Css的继承

  1. .codeClass{color:#000000;}
  2. <p class="codeClass"><span>你好</span>世界</p>

Span继承了，来自codeClass的color。也就是说，子元素会从父元素继承属性，当然不是所有的CSS属性都有继承性，文本属性（color、font、line-height、text-align、text-decoration、other）是具有继承性的，而自身属性（width、height、margin、padding、border、background）和显示属性(display、position、float、list-style)是不具有继承性的。

二、Css选择器的权重的表现，是根据id（id选择器）>class（类选择器）>body（元素选择器）

Id选择器的权重为100

Class选择器的权重为10

Body选择器的权重为1

例如：

不同权重时的表现

  1. p{color:#000;}
  2. .codeClass{color:#cccccc;}
  3. #codeId{color:#ffffff;}
  4. <p class="codeClass" id="codeId">你好世界</p>

最终显示的效果，你好世界的color为color：#ffffff，因为ID的权重是最高的，.codeClass和p都会被codeId屏蔽掉。

#codeid（权重100）>.codeClass(权重10)>p(权重1)

相同权重时的表现

  1. p{color:#000;}
  2. p{color;#fff;}
  3. <p>你好世界</p>

最终的显示效果，你好世界的color为color;#fff，因为css会当权重相同时，css会遵循层叠的原则，选择最新书写的css为最终显示效果。

权重的相加

  1. .codeClassing{color:#ffffff;}
  2. .codeClass span{color:#cccccc;}
  3. <p class="codeClass"><span class="codeClassing">你好</span>世界</p>

       最终的显示效果，你好世界的color为color：#cccccc，因为.codeClass(权重10)+span（权重1）=11，而.codeClassing(权重10)，.codeClass span>.codeClassing的所以最后显示效果为.codeClass span

总结：根据css权重的计算，可以更好的控制css在页面的表现效果，首先css开始书写时，使用权重最低的元素选择器，再使用类选择器，最后使用组合选择器，类选择器+元素选择器。这样的书写习惯，可以更好的控制CSS，不容易造成编程者无法理解css的显示权重。



郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com 使用 http si it 问题 la class style com 使用 http si it 问题 la

相关文章

随机文章

您可能还喜欢

您可能还喜欢