設計中最常用的CSS選取器

來源:互聯網
上載者:User

一些新手朋友對選取器一知半解,不知道在什麼情況下運用什麼樣的選取器,這是一個比較頭疼的問題,針對新手朋友,對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”。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.