详解CSS中的挑选器优先选择级及款式堆叠难题处

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

1. 初学者的疑惑
大伙儿常常在网页页面中看到相近 li#first 这样的挑选器。许多初学者疑惑了?因为应用 id 就早已能够明确元素了,为何前面还要加1个 li? 立即写上 #first 这样的 id 挑选器便可以了。听起来讲得非常好,简易检测1下也沒有难题。
但是,大家常常看到带有元素名字的挑选器,比如,在微软的新项目模版中就有很多的带有元素名字的挑选器,假如沒有用的话,为何要这样写呢?哈哈哈,这么写是有缘故的,下面就带大伙儿1起看1下!

CSS Code拷贝內容到剪贴板
  1. ul#navlist   
  2. {   
  3.     floatrightright;   
  4. }   
  5. ul#navlist li   
  6. {   
  7.     displayinline;   
  8. }  

2. 难题出現了
写1个简易的菜单,应用 ul 和 li 完成,菜单项之间应用边框来完成间距线。
html 编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <ul id="navlist">  
  2.     <li class="first"><a href="/" id="current">Home</a></li>  
  3.     <li><a href="#">Store</a></li>  
  4.     <li><a href="#">ShoppingCart</a></li>  
  5.     <li><a href="#">Admin</a></li>  
  6. </ul>  

应用下面的款式表,最先根据为全部的非常连接提升1个左侧框来画出间距的虚线,随后将第1个菜单项的左侧框去掉,我的第1个款式应用了 .first a。

CSS Code拷贝內容到剪贴板
  1. ul#navlist li   
  2. {   
  3.     displayinline;   
  4. }   
  5. ul#navlist li a   
  6. {   
  7.     border-left1px dotted #8A8575;   
  8.     padding10px;   
  9.     margin-top10px;   
  10.     color#8A8575;   
  11.     text-decorationnone;   
  12.     floatleft;   
  13. }   
  14. .first a   
  15. {   
  16.     bordernone;   
  17. }  

看1下实际效果,彻底沒有反映。

也有的地区说 id 挑选器的级別较为高,那末将类改为 id 。

XML/HTML Code拷贝內容到剪贴板
  1. <li id="first"><a href="/" id="current">Home</a></li>  

将款式表也开展相应的改动。

CSS Code拷贝內容到剪贴板
  1. #first a   
  2. {   
  3.     bordernone;   
  4. }  

但是結果呢?屹立不倒!

用火狐的 firebug 看1看,被忽视了。

3. 缘故
为何我的款式被秒杀了?
在网上有很多的文章内容,可是说法其实不1致,有的说要考虑到3个级別,但是也是有的说必须考虑到4个级別,可是总的方位大概是有关堆叠的。
比不上到 W3C 的网站上看1个到底。有关的规范在 这个网页页面 能够看到,现阶段为止的 CSS 规范有3个: CSS1, CSS2, 和 CSS3。
CSS1 是最开始的规范,在其中有关堆叠次序的叙述在 这里,还出示了1个简易的示例开展表明。

CSS Code拷贝內容到剪贴板
  1. LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */  
  2. UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */  
  3. UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */  
  4. LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */  
  5. UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */  
  6. #x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */  

在 CSS1 中将优先选择级分成3组,将 id 挑选器做为 a 组,类挑选器做为 b 组,元素名做为 c 组,每组中出現1次,计数1次,依照先 a 组开展较为,同样的状况下,应用 b 组开展较为,最终是 c 组。甚么挑选器的优先选择级別高,甚么挑选器出示的款式合理。例如在上面的事例中,第 5 组应用 id 的级別最高,因此,这组的款式设定起效,而别的的设定可能被忽视掉。
CSS21 规范
在 CSS2 中,又提升了有关行内表明 style 的组,因此参加较为的构成以便 4 组,在其中 style 的优先选择级別最高。一样,在 CSS2 的规范表明中也出示了样例。

CSS Code拷贝內容到剪贴板
  1. *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */  
  2.  li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */  
  3.  li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
  4.  ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
  5.  ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */  
  6.  h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */  
  7.  ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */  
  8.  li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */  
  9.  #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */  
  10.            /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */  
  11. <style type="text/css">   
  12.   #x97z { colorred }   
  13. </style>   
  14. <p id="x97z" style="color: green">   
  15. </p>  

在这个示例中,style 的优先选择级別最高,因此可能遮盖掉根据 id 开展的设定,色调为翠绿色。

4. 处理难题
根据上面的剖析能够看到,仅仅出示挑选器其实不足以可以起效,还要看挑选器的优先选择级別,在大家的难题中,即便应用 id 来挑选第1个菜单项:#first a ,包含了1个 id 和1个元素名,那末所得的优先选择级別为:
a=0, b=1, c=0, d=1
但是,通用性的挑选器是这样的:ul#navlist li a,优先选择级中却包含了1个 id, 也有 3 个元素名字,因此优先选择级別为:
a=0, b=1, c=0, d=3
因此大家的挑选器沒有比过通用性的挑选器,不幸产生了!
了解了缘故,难题也就简易了,提升大家挑选器的优先选择级別,超出通用性挑选器的优先选择级便可以了,例如,大家能够写成这样:
ul#navlist li#first a
如今的优先选择级是是多少呢?
a=0, b=2, c=0, d=3
在 b 组较为的情况下就早已超出了,看看是不是早已取得成功了!果真取得成功了,以下!

还能够再加关键性表明,还可以处理。!important 务必写在款式与分号之间,每一个款式务必独立申明。这个还可以用来调剂适配性难题,IE6不鉴别!important;话说回家,适配难题最好是還是用hack方式处理较为好!

CSS Code拷贝內容到剪贴板
  1. #first a   
  2. {   
  3.     bordernone !important;   
  4. }  

5. 总结
根据上面的叙述,不知道道大伙儿针对挑选器的权重有了1定的掌握沒有。了解挑选器的权重,能够更好的操纵款式,用权重高的款式去遮盖掉那些权重低的款式!了解css的这1点,很关键!