CSS選取器(一)，CSS選取器(

CSS選取器(一)，CSS選取器(

CSS選取器包括標籤選取器、ID選取器、類別選取器、偽類和偽對象選取器、子選取器、相鄰選取器、屬性選取器、通用選取器、包含選取器、分組選取器、指定選取器等選取器，分為標籤選取器、ID選取器、類別選取器、特殊選取器這四類。

 

以下是我總結的5種常用的CSS選取器。

 

1、標籤選取器eg:  p{ color:#333; }       a{ display:block; }優點：能快速為頁面中同類型的標籤統一樣式。缺點：不能設計差異化的樣式，有時會造成樣式的相互幹擾。 2、ID選取器eg:  #nav{ margin:0px; padding:10px; }解釋說明： '#' 為ID選擇符首碼                   'nav' 為ID名稱元素的ID名稱是唯一的，只能對應文檔中的一個元素。適用範圍：在頁面中唯一、固定、不會重複出現的對象，如導覽列等。 3、類別選取器eg:  .col{ }解釋說明： '.' 為類選擇符首碼                   'col' 為類名適用範圍：類樣式可應用於文檔中的多個元素。特性：①使用類別選取器前，需在HTML文檔中為要應用類樣式的元素定義相應的class屬性；           ②有較好的靈活性，可指定類樣式應用的元素物件範圍。比較：在同等條件下，ID選取器的優先權比類別選取器更大。 4、偽類和偽對象選取器eg:  a:hover{ font-weight;bold; }解釋說明： 'a' 為指定標籤名                   '：' 為偽類或虛擬元素標識符                   'hover' 為偽類或虛擬元素名適用範圍：用以選擇特殊狀態或特殊地區下的元素。6種常用偽類別選取器如下表所示：

偽類	說明
:focus	定義對象在成為輸入焦點時的樣式
:link	定義未瀏覽過的超連結樣式
:visited	定義訪問過的樣式
:hover	定義滑鼠經過的樣式
:active	定義滑鼠按下的樣式
:first-child	定義對象的第一個子物件的樣式

“：link”、“:visited”、“:hover”、“:active”這4個連結偽類別選取器聯合使用時，要注意使用順序，錯誤的順序會使超連結樣式失效。eg:   a{ text-decoration:none; }        a:link{ color: black; }        a:visited{ color: red; }        a:hover{ color: blue; }        a:active{ color: grey; }關於":link"偽類，有些瀏覽器會把它解析為任何超連結，即它既可以是訪問過的，也可以是未訪問的。故有時可用a選取器樣式來替代a:link選取器樣式。注意：在IE瀏覽器中，是用於超連結相關的偽類別選取器時應為a元素定義href屬性，否則會失效，但在其他瀏覽器中則可用無需為a元素定義href屬性。 5、子選取器eg:   div>a{ color:#fff; }解釋說明： 'div' 為父級選擇符名                   '>' 為子選擇符標識符                   'a' 為子級選擇符名注意：①子選取器中所控制的元素只能是‘>’符號前面所指定對象的子項目。