CSS3的first

日期:2020-09-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站


CSS 中的 :first-child Selector 能够挑选到特殊元素的第1组物品(同1个 parent)
HTML

XML/HTML Code拷贝內容到剪贴板
  1. <ul>  
  2.     <li>1</li>  
  3.     <li>2</li>  
  4.     <li>3</li>  
  5. </ul>  
  6. <hr>  
  7. <ul>  
  8.     <li>1</li>  
  9.     <li>2</li>  
  10.     <li>3</li>  
  11. </ul>  

CSS

CSS Code拷贝內容到剪贴板
  1. // 只套用序号 1 的 li   
  2. li:first-child {   
  3.     colorgreen;   
  4. }  

first-child和:first-of-child的差别
倘若大家有这样的1段HTML编码:

XML/HTML Code拷贝內容到剪贴板
  1. <div>  
  2.     <p>第1个元素</p>  
  3.     <h1>第2个元素</h1>  
  4.     <span>第3个元素</span>  
  5.     <span>第4个元素</span>  
  6. </div>  

CSS挑选器:
大家要搜索在其中的元素,假如应用下面的界定方式——
p:first-child  配对到的是p元素,由于p元素是div的第1个子元素;
h1:first-child  配对不到任何元素,由于在这里h1是div的第2个子元素,而并不是第1个;
span:first-child  配对不到任何元素,由于在这里两个span元素都并不是div的第1个子元素;
:first-child  配对到的是p元素,由于在这里div的第1个子元素便是p。
上面运用的款式,有两个是配对不到的,可是别惊慌,CSS中还界定了:first-of-child伪类,请看他的用法和解读:
p:first-of-type  配对到的是p元素,由于p是div的全部为p的子元素中的第1个,客观事实上这里也仅有1个为p的子元素;
h1:first-of-type  配对到的是h1元素,由于h1是div的全部为h1的子元素中的第1个,客观事实上这里也仅有1个为h1的子元素;
span:first-of-type  配对到的是第3个子元素span。这里div有两个为span的子元素,配对到的是第1个。
:first-of-type  配对到的是p元素
总结:
:first-child 配对的是某父元素的第1个子元素,能够说是构造上的第1个子元素。
:first-of-type 配对的是该种类的第1个,种类是指甚么呢,便是冒号前面配对到的物品,例如 p:first-of-type,便是指全部p元素中的第1个。这里已不限定是第1个子元素了,要是是该种类元素的第1个就可以了,自然这些元素的范畴全是 属于同1级的,也便是同辈的。
一样种类的挑选器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 还可以这样去了解。


IE的适配型难题
先看以下1段编码,HTML一部分:

XML/HTML Code拷贝內容到剪贴板
  1. <ul class="example">  
  2.     <li>aa</li>  
  3.     <li>bb</li>  
  4.     <li>cc</li>  
  5.     <li>dd</li>  
  6. </ul>  

CSS一部分:

CSS Code拷贝內容到剪贴板
  1. .example li{float:left;margin-left:10px;}  

假如必须将第1个li的margin-left设为0px,则能够根据下面这个方式完成:

CSS Code拷贝內容到剪贴板
  1. .example li{float:left;margin-left:10px;}   
  2. .example li:first-child{margin-left:0;}  

但是,IE6不适用:child-first方式,因而大家必须应用表述式几乎完成IE6也适用:child-first,编码以下:

CSS Code拷贝內容到剪贴板
  1. .example li{float:leftmargin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}   
  2. .example li:first-child{margin-left:0;}  

自然,大家还可以给第1个li加上1个class来再次界定margin-left,假如说是静态数据网页页面这样做还能够,假如说程序流程必须循环系统輸出li的话应用child-first会好些,最少可使程序流程少做1条分辨。


上一篇:弹窗垂直居中的简易完成方式 返回下一篇:没有了