Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器

一、CSS权重概念

CSS权重概念：指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

二、权重的等级

• 2.1、权重的等级划分

  • 1、!important，加在样式属性值后，权重值为 10000
  • 2、内联样式，如：style=""，权重值为1000
  • 3、ID选择器，如：#content，权重值为100
  • 4、类，伪类和属性选择器，如： content、:hover 权重值为10
  • 5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
  • 6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

• 2.2、权重的计算实例一

  
  
  
      
      
      
  
  
       
  这是一个div元素
  
  
  

  两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，所以文字的最终颜色为red

• 2.3、权重的计算实例二

  
  
  
      
      
      
  
  
    
  
      
  
         
  这是一个h2标题
      
    
  
  
  

  第一条样式的权重计算： 100+1+10+1，结果为112；
  第二条样式的权重计算： 100+10+1，结果为111；
  h2 标题的最终颜色为red

  最后提示：权重的和越大，样式的优先级越高！

三、CSS3新增选择器

• 3.1、E:nth-child(n)：匹配元素类型为E(标签的名字，如：div,p,span等等)且是父元素的第n个子元素，如下的例子

  
  
  

  E:nth-child(n)

  
  
  
     
     
     
  
  
     
  
        
  2
        
  3
        
  4
        
  5
  
  
  

  提示：.list div:nth-child(2) 其中的 2 代表 list 里面的第2个div

• 3.2、E:first-child：匹配元素类型为E且是父元素的第一个子元素

• 3.3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素

• 3.4、E > F E元素下面第一层子集

  
  
  

  E > F E元素下面第一层子集

  
  
  
     
     
     
  
   
     
  
         
  
            
  第1个h1
         
         
  
            
  第2个h1
         
         
  4
         
  5
         
  第3个h1
      
  
  
  

• 3.5、E + F 紧挨着的后面的兄弟元素
  

  

  `E + F` 紧挨着的后面的兄弟元素

  
  
  
     
     
     
  
  
      
  
         
  1
         
  第1个h1
         
  第2个h1
         
  2
         
  3
         
  4
         
  5
      
  
  
  

  • 3.6、E ~ F E元素后面的兄弟元素
    
    

    `E ~ F` E元素后面的兄弟元素

四、属性选择器

• 4.1、E[attr] 含有attr属性的元素或者 E[attr='ok'] 含有attr属性的元素且它的值为“ok”,如下
  

  

  
  
  
      
      
      
  
  
      
  这是1个div元素
      
  这是2个div元素
  
  
  

• 4.2、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
  

  

  `E[attr^='ok']` 含有attr属性的元素且它的值的开头含有“ok”

  
  
  
      
      
      
  
  
      
  这是1个div元素
       
  这是2个div元素
  
  
  

• 4.3、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
  

  

  E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”

• 4.4、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

  
  
  

  E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

推荐一篇博客 CSS3 E:nth-child、E>F、E~F、E+F以及属性选择器