CSS独特性、承继与堆叠

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

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

1、独特性标准

挑选器的独特性由挑选器自身的组件明确;独特性由4个一部分构成,其原始值为0,0,0,0。

1. 针对挑选器中的每个id,加0,1,0,0;

2. 针对挑选器中的每个类、伪类、特性挑选,加0,0,1,0;

3. 针对挑选器中的每个元素、伪元素,加0,0,0,1;

4. 融合符与通配符针对挑选器的独特性沒有任何奉献。

留意:

1. 0,0,1,0的独特性比0,0,0,13的独特性更高。

2. 通配符 * 的独特性为0,0,0,0,它是有独特性的;融合符(例如h1+p中的“+”)压根沒有独特性;承继而来的款式也沒有独特性。

请看以下编码:

CSS Code拷贝內容到剪贴板
  1. <head>
  2. <style>
  3. *{
  4. color:red;
  5. }
  6. body{
  7. color:cyan;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>Whatkindofcolorthisparawillbe?</p>
  13. </body>

网页页面显示信息以下:

有关通配符 * :因为 * 可用于全部元素,并且有0独特性,常常会在无意间间导致承继没法完成的状况,应当尽可能防止应用 * 挑选器。

3. 特定id特性的特性挑选器与id挑选器有实质差别,例如:

CSS Code拷贝內容到剪贴板
  1. <head>
  2. <style>
  3. div[id="test"]p{
  4. color:red;
  5. }
  6. #testp{
  7. color:cyan;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <divid="test">
  13. <p>Whatkindofcolorthisparawillbe?</p>
  14. </div>
  15. </body>

网页页面实际效果:

4. 行内款式的独特性最高,为1,0,0,0。

5. 标识为!important的申明被称为关键申明,它沒有独特性,但是要与非关键申明分开考虑到。

实际而言:非关键申明分成1组,它们之间的矛盾应用独特性处理;关键申明分成1组,它们之间的矛盾內部处理;关键申明一直比非关键申明优先选择。

2、承继

1. 承继沒有任何独特性,记牢这1点常常能搞清楚许多难题。

请看以下编码:

CSS Code拷贝內容到剪贴板
  1. <head>
  2. <style>
  3. p{
  4. color:red;
  5. }
  6. </style>
  7. </head>
  8. <body>
  9. <p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
  10. </body>

网页页面实际效果:

为何设定了<p>元素的色调为鲜红色,<a>元素的色调确是蓝色?

这其实不是由于<a>元素不承继父元素的色调(谅解我以前便是这么觉得的),而是由于<a>元素承继了<p>元素的色调,可是这个承继来的款式压根沒有独特性,但是访问器默认设置款式中对<a>元素设定了款式,很显著访问器默认设置款式的独特性更高,因而<a>元素就依照访问器默认设置款式显示信息。

2. 有关CSS中的承继:1般而言,只能子元素承继父元素的款式,也便是说款式在DOM中只能向下传送,不可以向上;可是有1个列外,运用到body元素的情况款式能够向提交递到html元素,相应地能够界定其画布。

3、堆叠

堆叠标准:

1. 按权重排列。读者关键申明>作者关键申明>作者1般申明>读者1般申明>客户代理商申明。

2. 权重同样的状况下,依照独特性排列,独特性越高的胜出。

3. 独特性同样的状况下,依照款式表格中的次序排列,后出現的胜出。

btw,更是由于这个标准,才会应用LoVe-HA的次序申明连接款式(LoVe-HA 先后为 :link; :visited; :hover; :active)。