CSS基礎知識-選擇器的種類及優先順序

airland發表於2021-09-09
CSS

一、CSS選擇器常見的有幾種?

常見的有

1、id選擇器

見自己編寫的如下程式碼：

 html>            Document        
這是id選擇器
     
這不是id選擇器
  

2、class選擇器

html>            Document        
這是class選擇器
     
這不是class選擇器
  

3、屬性選擇器

3.1 屬性名加屬性值型

html>            Document     
     使用者名稱 
     密碼  
  

3.2純屬性名型

html>            Document     
 這裡是匿名者的圖片     ![Anonymous](http://upload-images.jianshu.io/upload_images/2166980-53ed3d75ce5ae54c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)     ![AnonymousPicture](http://upload-images.jianshu.io/upload_images/2166980-3494a3e338066626.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)     ![AnonymousPicture](http://upload-images.jianshu.io/upload_images/2166980-3494a3e338066626.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  
  

4、分組選擇器

用“,”隔開，表示該組元素屬性都會作用

html>            Document    
 這是h1標題
 
 這也是h1標題
 
      
這是div裡的h1
     
 這是div裡的p 
    
  

5、派生選擇器

html>            Document    
 這是h1標題
 
      
這是div裡的h1
       
 這也是div裡的h1標題
      
 這是div裡的p 
   
  

6、偽類選擇器

比如.hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等

html>            Document    
      這是偽類選擇器 
  

又例如：

html>            Document    
 選中後字型變紅色背景變藍色
 
 選中後不變色
  

7、偽元素選擇器

:after、:before等

html>            Document    
         
  • 我的前面需要增加“這是前置字”，我的後面需要增加“這是後置字”
    •      
  • 我的前面需要增加“這是前置字”，我的後面需要增加“這是後置字”
    •      
  • 我的前面需要增加“這是前置字”，我的後面需要增加“這是後置字”
    •      
  • 我的前面需要增加“這是前置字”，我的後面需要增加“這是後置字”
    •  
  

8、組合選擇器

比如E,F/E F（後代選擇器）/E>F（子元素選擇器）/E+F（直接相鄰元素選擇器----匹配之後的相鄰同級元素）/E~F（普通相鄰元素選擇器----匹配之後的同級元素）

html>        Document    
   這是外層DIV   
       這是h1大標題   
   
       這是外層DIV裡的div   
       這是中層div的h1標題1   
   
 這是中層div裡的段落
   
       這是中層div的h1標題2   
        
 這是內層div           
 這是內層div的h1標題
        
   
 
 這也是h1大標題 
 
   這還是h1大標題 
 
  

二、選擇器的優先順序是怎樣的?

  • 選擇器優先順序由高到低分別為：
    !important > 作為style屬性寫在元素標籤上的內聯樣式 >id選擇器>類選擇器>偽類選擇器>屬性選擇器>標籤選擇器> 萬用字元選擇器（* 應少用）>瀏覽器自定義；

  • 當比較多個相同級別的CSS選擇器優先順序時，它們定義的位置將決定一切。下面從位置上將CSS優先順序由高到低分為六級：
    1、位於

    • 標籤裡的中所定義的CSS擁有最高階的優先權。
    2、第二級的優先屬性由位於 標籤中的 @import 引入樣式表所定義。
    3、第三級的優先屬性由標籤所引入的樣式表定義。
    4、第四級的優先屬性由標籤所引入的樣式表內的 @import 匯入樣式表定義。
    5、第五級優先的樣式有使用者設定。
    6、最低階的優先權由瀏覽器預設。

  • 選擇器註明的越具體，某些情況下則其優先順序也越高；若重複寫了則以最後的為準；

三、class 和 id 的使用場景?

  • class使用場景：需要某些特定樣式的標籤則放在同一個class中，需要此樣式的標籤可再新增此類。（class不可被javascript中的GetElementByID函式所呼叫）

  • id使用場景：1、根據提供的唯一id號快速獲取標籤物件，如：document.getElementById(id) ；2、用於充當label標籤for屬性的值：示例：，表示單擊此label標籤時，id為userid的標籤獲得焦點

四、使用CSS選擇器時為什麼要劃定適當的名稱空間？

劃定適當的名稱空間可：
1、提高程式碼的可讀性；
2、便於維護管理；
3、保持程式碼的可擴充性；

五、以下選擇器分別是什麼意思?

詳見註釋：

#header{ } /* 這是id選擇器header*/ .header{ }/*這是類選擇器header*/ .header .logo{ }/*這是類選擇器header後的類logo*/ .header.mobile{ }/*  滿足類header及類mobile */ .header p, .header h3{ }/* 類選擇器中的header 段落p 和類選擇器中的標題h3 */ #header .nav>li{ }/*id選擇器中的header後的類選擇器nav的直接子元素li */ #header a:hover{ }/*id選擇器header後的a標籤hover偽類*/

六、列出你知道的偽類選擇器

:hover /:active/ :link /:visited/::selection/:focus/:first-child/:nth-child(n)/:first-of-type/:nth-of-type(n)/:last-child/:nth-last-child(n)/:last-of-type/:nth-last-of-type(n)

七、:first-child和:first-of-type的作用和區別

E:first-child的作用 是選擇E的父元素中的所有第一個子元素的E標籤；
E:first-of-type的作用是 選擇E的父元素中的第一個E型別的標籤；

根據字面意思可以很好的理解這兩者的區別：E:first-child首選是E的父元素中的第一個子元素，在這些子元素中選中E標籤；E:first-of-type首選是E的父元素的第一個同型別的（E）標籤；舉個例子

html>            Document        
這是body裡的第一個子元素
     
這是body裡的第二個子元素
     
這是body裡的第三個子元素 
                  
這是body中的div中裡的第二個子元素
         
這是body中的div中裡的第三個子元素
     
     
這是body裡的第四個子元素
  

上述程式碼的執行結果為:“這是body裡的第一個子元素”及“這是body中的div中裡的第二個子元素”字均變為紅色；若將

八、執行如下程式碼，解析下輸出樣式的原因。

  
    
aa
    
bb
    
ccc
  

執行結果為aa變紅，aa、bb背景色均變為藍色，ccc不做任何變化；
原因為：

.item1:first-child{   color: red; }

上述程式碼的作用是選擇item1中的父元素中的第一個子元素並使其字型變為紅色；當執行到

aa

時，aa變為紅色，因為此時段落p是item1父元素div中的第一個子元素，而h3中的bb及h3中的ccc的父元素也是div，但div中的第一個子元素為p，因此bb及ccc字型顏色均為預設值即不會變成紅色；

.item1:first-of-type{   background: blue; }

上述程式碼的作用是選擇item1中的父元素中的第一個同型別標籤並使其背景色變為藍色；當執行到

aa

時，因p為item1的父元素div的第一個型別的標籤，且p也為item1類，因此p中的aa背景色會變成藍色；當執行到

bb

時，同理，h3中的bb背景色也會變成藍色；當執行到

ccc

時，因父元素div中的第一個h3型別的元素已經存在，故h3中的ccc背景色還是預設的；
故：執行結果為aa變紅，aa、bb背景色均變為藍色，ccc不做任何變化；

九、 text-align: center的作用是什麼，作用在什麼元素上？能讓什麼元素水平居中？

作用是使得文字或者img標籤等一些內聯物件（或與之相似的元素）居中；其可作用在塊級元素（比如p，h1等）中的內行元素物件上；如:

html>            Document   
    
aa
    
bb
    
ccc
    ![](http://upload-images.jianshu.io/upload_images/2166980-347883c49bd3e5d5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  

上述程式碼可將div中的p及h3中的文字和圖片均進行居中了。

另margin:0 auto 是設定塊級元素（或類似元素）的居中，注意與text-align:center的區別，可詳見：http://www.cnblogs.com/zhwl/p/3529473.html

十、如果遇到一個屬性想知道相容性，在哪檢視?

可在caniuse.com和w3school.com.cn等網站進行查詢。

十一、補充：關於 :nth-child選擇器

    
         
         
         
         
     

上述程式碼要實現.second同樣效果的選擇器，可採用以下方法：

  • 1、

    .parent :nth-child(2) {  /* :nth-child(2)前有空格！ 意義是父元素中的第二個子元素*/         height: 200px;         border-color: blue;     }

  • 2、

    .children:nth-child(2) {  /* :nth-child(2)前無空格！ 意義是屬於其父元素中的第二個子元素.children*/         height: 200px;         border-color: blue;     }

  • 3、

    .parent  .children:nth-child(2) {  /* :nth-child(2)前無空格！ 意義是屬於 .parent元素中的第二個子元素.children*/         height: 200px;         border-color: blue;     }

**本文版權歸 所有，如需轉載請註明出處。謝謝！ *



作者：該帳號已被查封
連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/964/viewspace-2813855/，如需轉載，請註明出處，否則將追究法律責任。

相關文章