举例详解CSS中的的优先选择级

日期:2021-03-05 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

测算优先选择级

优先选择级是依据由每种挑选器种类组成的联级字串测算而成的。他是1个对应配对表述式的权重。 假如优先选择级同样,靠后的 CSS 会运用到元素上。

留意:元素在文本文档树中的部位是不容易危害优先选择级的
优先选择级次序

优先选择级逐级提升的挑选器目录:

    通用性挑选器(*)
    元素(种类)挑选器
    类挑选器
    特性挑选器
    伪类
    ID 挑选器
    内联款式

根据种类的优先选择级

优先选择级是依据挑选器种类开展测算的. 在下面的事例中,特性挑选器虽然挑选了1个ID可是在优先选择级测算规律中還是依据其种类测算。
有以下款式申明:


CSS Code拷贝內容到剪贴板
  1. #foo {   
  2.   colorgreen;   
  3. }   
  4. *[id="foo"] {   
  5.   colorpurple;   
  6. }  

将其运用在下面的HTML中:


XML/HTML Code拷贝內容到剪贴板
  1. <p id="foo">I am a sample text.</p>  

演试事例:https://jsfiddle.net/donqi/vmo5m3re/
挑选器优先选择级1致

优先选择级同样的状况下,后面界定的会遮盖前边界定的


XML/HTML Code拷贝內容到剪贴板
  1. <div class="box padding border"></div>  
  2. <div class="box border padding"></div>  
  3. <div class="padding box border"></div>  

css:


CSS Code拷贝內容到剪贴板
  1. div{   
  2.     height:100px;   
  3.     width:100px;   
  4.     padding:20px;   
  5.     margin:20px;   
  6.     border:10px solid hsla(0,0%,0%,0.5);   
  7.     background-color:#ccc;   
  8.     background-image:url("/favicon.png");   
  9.     background-repeat:space;   
  10.     background-origin:content-box;   
  11. }   
  12. div.box{   
  13.        
  14.     background-clip:content-box;   
  15. }   
  16. div.border{   
  17.     background-clip:border-box;   
  18. }   
  19. div.padding{   
  20.     background-clip:padding-box;   
  21. }  

演试事例: https://jsfiddle.net/donqi/wvLpwz48/