css的三大特性

一、继承性

所谓继承性，就是指被包含的元素将拥有外层元素的样式效果。继承性最典型的应用就是在默认样式的预设上。

我们来看一段的代码：

  
    
    
  
  
    

      

        More>>
        新闻动态
      
      

        

          
微信“阅读数”是怎么算的？[7-25]
          
微信“阅读数”是怎么算的？[7-26]
          
微信“阅读数”是怎么算的？[7-27]
        
      
    
  

                                                                                    代码1

                           图1

如果我们想通过css给“新闻动态”添加红色并不影响其他的span标签，我们就可以用继承了

例如：

                                                                                           代码2

效果如下：

                           图2

二、层叠性

层叠是css样式的基本特性之一，层叠性，简单点，就是可以有多个选择器或一个选择器对某个或某几个标签进行选择，如果多个选择器赋予它相同属性即要遵从优先级原则，它具有任意性。

我们来看（还是之前那个body）：

                                                                                              代码3

结果如下：

                               图3

三、优先级

刚刚我们已经接触过一点点优先级的相关知识，那么为什么图3的新闻动态字体是红色而不是绿色呢，让我们来探究一下吧

一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级

对于常规的选择器，他们拥有一个优先级加权值（以下简称权值），说明如下：

通配符选择器：权值为0；

标签选择器/伪元素或伪对象选择器：权值为1；

类选择器/属性选择器：权值为10；

id选择器：权值为100；

！important：权值为无穷大；

我们来看一个例子：

  
    
    
  
  
    

      

        More>>
        新闻动态
      
  

                                                                                           代码4

效果如下：

 

                            图4

由此我们可以得出id选择器权值比标签选择器大，如果相等则较后的取代前面的。

然后，以上面权值为起点来计算每个样式中选择器的总权值，规则如下：

统计选择器中id选择器的个数，然后乘于100；

统计选择器中类选择器的个数，然后乘以10；

……

然后把得到的数值相加即可得到总权重。

现在我们就可以解释为什么新闻动态的字体是不是绿色的了

因为代码3

#at>h3>span

100 1 1 权值为102

#news 

权值为100