详尽讲解CSS中的伪类after

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

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5


1. 引子

前段時间学习培训 web 合理布局的情况下,由于要用波动 float 特性,因此就名正言顺地碰到了消除波动 clear 特性。课堂教学的实例中是用新建1个空的 div 标识的方法来消除波动的,关键编码以下:

CSS Code拷贝內容到剪贴板
  1. <div class="mainBox">   
  2.     <div class="leftBox"></div>   
  3.     <div class="rightBox"></div>   
  4.     <div class="clear"></div>   
  5. </div>   
  6.   
  7. .mainBox   
  8. {   
  9.     width:960px;   
  10.     margin:0 auto;   
  11.     background-color:#CFF;   
  12.     overflow:visible;   
  13. }   
  14. .leftBox   
  15. {   
  16.     width:740px;   
  17.     height:300px;   
  18.     background-color:#C9F;   
  19.     float:left;   
  20. }   
  21. .rightBox   
  22. {   
  23.     width:210px;   
  24.     height:300px;   
  25.     background-color:#FCF;   
  26.     float:rightright;   
  27. }   
  28. .clear  
  29. {   
  30.     clear:both;   
  31.     height:0;/*处理IE6下有高宽比的难题*/  
  32.     overflow:hidden;   
  33. }  

看到以后,想起之前见到过有效 css 伪类 after 来开展消除波动的方法。记不太清了,因而写变成以下的状况:

CSS Code拷贝內容到剪贴板
  1. <div class="mainBox">   
  2.     <div class="leftBox"></div>   
  3.     <div class="rightBox"></div>   
  4. </div>   
  5.   
  6. .mainBox{   
  7.     width:960px;   
  8.     background-color:#CFF;   
  9.     margin:0 auto;   
  10.     }   
  11. .leftBox{   
  12.     width:740px;   
  13.     height:300px;   
  14.     background-color:#C9F;   
  15.     float:left;   
  16. }   
  17. .rightBox{   
  18.     width:210px;   
  19.     height:300px;   
  20.     background-color:#FCF;   
  21.     float:rightright;   
  22. }   
  23. .rightBox:after{   
  24.     clear:both;   
  25.     content:".";   
  26.     visibility:hidden;   
  27.     display:block;   
  28.     height:0;   
  29.     overflow:hidden;   
  30. }  

不幸产生了,mainBox 中的 #CFF 色调并沒有出現在 leftBox 和 rightBox 正中间,表明上述的写法有地区不对了。了解了杰出的谷歌以后才发现,css 的 after 伪类应当写在 mainBox 以后,即:

CSS Code拷贝內容到剪贴板
  1. .mainBox:after{   
  2.     clear:both;   
  3.     content:".";   
  4.     visibility:hidden;   
  5.     display:block;   
  6.     height:0;   
  7.     overflow:hidden;   
  8. }  

    P.S.
    1. 如今转过头看来上述方式,实际上上述方式所谓的消除波动,全是将沒有设定高宽比的.mainBox的高宽比撑起来,从而使得.mainBox的弟元素能立即跟在.mainBox后边。而不容易由于.mainBox高宽比塌陷而被掩藏在.mainBox內部波动的子元素下。避免高宽比塌陷还能够应用建立1个 BFC 的方式(如overflow:hidden)来开展。
    2. 假如.mainBox设定了高宽比,且超过或等于其波动的子元素,那末无需这样的消除波动的方法,.mainBox的弟元素也不容易遭受.mainBox內部波动子元素的危害。
    3. 若果不考虑到.mainBox的高宽比塌陷难题,立即在其弟元素处设定clear特性便可。

2. 有关 after 的思索

w3school 中有关 after 伪类的详细介绍以下:

    界定和用法
    :after 挑选器在被选元素的內容后边插进內容。
    请应用 content 特性来特定要插进的內容。

较为有歧义的是这个“被选元素的內容后边”中的 后边 两个字。刚开始我误觉得了是将 after 中的內容插进至被选元素的 弟元素 部位上。

CSS Code拷贝內容到剪贴板
  1. .rightBox:after{   
  2.     content:"我是after";   
  3.     display:block  
  4. }  

会造成相近于

CSS Code拷贝內容到剪贴板
  1. <div class="rightBox"></div>   
  2. <div>我是after</div>  

这样的实际效果 (自然,after 伪类具体上是不容易造成1个 DOM 元素的)。

但根据引子选用 css 伪类 after 来开展消除波动的检测,发现 后边 具体上应当了解为将 after 中的內容插进至被选元素的 子元素 部位上,即相近于以下实际效果:

CSS Code拷贝內容到剪贴板
  1. <div class="rightBox">   
  2.     <div>我是after</div>   
  3. </div>  

因而,才有了引子选用 mainBox:after{} 这样的方法来完成 after 伪类消除波动,而非 rightBox:after{}这类方法。

简易总结下:after 伪类所造成的內容应当是在被选元素的子元素部位(并且在全部子元素的最终,简易的几个检测就可以发现,已不赘述),而非被选元素的弟元素部位。
3. w3school 中的示例

从这个 示例 能够看出,after 伪类內容的默认设置 display 方法应当为内联 inline。

实际上看到这个示例才发现,after 伪类所造成的內容应当便是在被选元素的子元素部位的(汗,那还饶了那末大个圈才发现……)。示例中 p 标识的 after 內容呈现的方法早已很确立了,大伙儿能够细心感受下。因此说,看示例也是很关键啊。

P.S. 自己已零零碎碎学了些前端开发的物品,现阶段正在探求中前行。水平比较有限,如有不对的地方,还望各位多多指教。

&& 这个 markdown 编写器确实是大爱啊!

上一篇:CSS撰写标准的有关提议 返回下一篇:没有了