<form id="dlljd"></form>
        

        <address id="dlljd"><address id="dlljd"><listing id="dlljd"></listing></address></address>
        <em id="dlljd"><form id="dlljd"></form></em>
          
<address id="dlljd"></address>
            <noframes id="dlljd">
              


              
	
              
		
		聯系我們 - 廣告服務 - 聯系電話：
		
	
              

              

              
	
	
	
              
	
              

              


               您的當前位置： > 關注 >  > 正文
              


              
  
              
    
              
      
              每日消息!CSS：好玩的‘偽類’系列之——(:only-child與:only-of-type)&nbsp; 例子說明
              
      
               來源：CSDN   時間：2022-12-08 14:58:57 
        
      
              
	  
      
	  
              
        
              :only-child

              【資料圖】
              官方定義：當當前元素的父元素，有且只有它本身一個子元素（DOM節點）時，修改其樣式
              :only-of-type
              官方定義：當當前元素在其父元素的子元素序列中，沒有其它相同兄弟元素（唯一的，有且只有一個它本身）時，修改其樣式
              注意：
              在官方文檔中，這兩個偽類的定義如上所述（在我理解中），但親自測試后，發現，這兩個偽類所實現的效果竟然一樣（見下面案例），因此這里特別記錄下，另外，考慮到本人才疏學淺，可能沒有正確的使用到這兩個偽類，如果有知道正解的看官，煩請不吝賜教，感激不盡！
              觸發條件：（自己總結），當當前元素，在整個html文檔中、或在其父元素的所有子元素序列中，有且只有一個它本身（沒有其他相同兄弟元素）、或在其父元素的子元素中，只有它本身，修改其樣式
              兼容：IE8及8以下不支持 Opera9.5以下不支持
              舉個栗子
              html代碼：（為了避免權重問題，我分別為案例中所有的元素取了class名）
              我是div下的span(唯一的)    我是div下的i(唯一的)      我是div下的p1我是div下的p2我是div下的span(唯一的)     在整個html文檔中，我是唯一的b元素
              css代碼：
              .main{  width: 40%;}.div{  margin-bottom: 30px;  width: 100%;  border: 1px  solid #eee;}.p{  width: 100%;  font-size: 14px;  line-height: 20px;  text-align:  center;  color:#660033;}.main:only-child{  display: inline-block;  text-align:  left;/* 左對齊 */  color:#99FF33;/* 綠色 */}/* 下面的聲明覆蓋了上面的聲明 */.main:only-of-type{   display: inline-block;  text-align: right;/* 右對齊 */  color:red;/* 紅色 */}
              效果圖：
                    
              
      
               責任編輯： 
              
      
              
        
                
			        
              
      
              
	  
              
	  
		
              標簽：
		 
		
              
		
		
	  
              
    
      
      
      
              
        
               相關推薦： 
              
        
                
		        
              
      
              
	  
	  
      
              
        
               精彩放送： 
              
        
      
              
    
              
  
              
  
                      

                
    
    
    
  
    
              
      
               新聞聚焦 
              
      
    
              
	
  
              
  
               
              

              


               
  
Top


中文字幕在线观看亚洲日韩