設計中最常用的CSS選取器

一些新手朋友對選取器一知半解，不知道在什麼情況下運用什麼樣的選取器，這是一個比較頭疼的問題，針對新手朋友，對CSS選取器作一些簡單的說明，希望能對大家的學習工作有一定的協助。

                
準確而簡潔的運用CSS選取器會達到非常好的效果。我們不必通篇給每一個元素定義類（class）或ID，通過合適的組織，可以用最簡單的方法實現同樣的效果。在實際工作中，最常用的選取器有以下五類：

              

                 

一、標籤選取器：
顧名思議，標籤選取器是直接將HTML標籤作為選取器，如p、h1、dl、strong等HTML標籤。

如：

p { font:12px;}
em { color:blue;}
dl { float:left; margin-top:10px;}

            

       

二、id選取器：
我們通常給頁面元素定義id。
如<div id="menubar"></div>，然後在樣式表裡這樣定義：
#menubar {
margin:0 auto;
background:#ccc;
color:#c00;
}
其中"menubar"是自己定義的id名稱。注意在前面加"#"號。
id選取器也同樣支援後代選取器，
例如：
#menubar p {
text-align:center;
line-height:20px;
}
這個方法主要用來定義層和那些比較複雜，有多個“唯一後代”的元素。

        

           

三、類(class)選取器：
在CSS裡用一個點開頭表示類別選取器
例如：
.mainContent {
color:#f60;
font-size:14px ;
}
在頁面中，用class="類別名"的方法調用： <span class="mainContent">14px大小的字型＜/span>這個方法比較簡單靈活，
可以隨時根據頁面需要建立和刪除。但需要避免多class綜合症。

          

            

四、群組選取器：
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔。
如：
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
使用組群選取器，將會大大的減化CSS代碼，將具有多個相同屬性的元素，合并群組進行選擇，
定義同樣的CSS屬性，這大大的提高了編碼效率與CSS檔案體積。 

          

            

五、後代選取器：
後代選取器也叫派生選取器。可以使用後代選取器給一個元素裡的子項目定義樣式，

例如：

li strong {
font-style:italic;
font-weight:800;
color:#f00;
}

#mainContent p {
color:#000;
line-height:26px;
}          

       

       

六、通用選取器：

通用選取器由一個星號表示。通用選取器一般用來對頁面上的所有元素應用樣式。

例如：可以使用以下規則刪除每個元素上預設的瀏覽器填充和空白處：

* {

padding: 0;

margin: 0;

}

         

CSS中用四個偽類來定義連結的樣式，分別為a:link、a:visited、a:hover和a:active。
例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上語句分別定義了"連結、已訪問過的連結、滑鼠停在上方時、點下滑鼠時"的樣式。
注意，必須按以上順序寫，否則顯示可能和你預期的不一致。記住它們的順序是“LVHA”。