首頁 > 開發者 > 網站開發

1.3 基本CSS選取器

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：返回頂部   style   class   blog   java   http   

一、標記選取器

二、類別選取器

三、ID選取器

選取器(selector)是CSS中很重要的概念，所有HTML語言中的標記樣式都是通過不同的CSS選取器進行控制的。使用者只需要通過選取器對不同的HTML標籤進行選擇，並賦予各種樣式聲明，即可實現各種效果。

為了理解選取器的概念，可以用“地圖”作為類比。在地圖上都可以看到一些“圖例”，比如河流用藍色的線表示，某公路用紅色的線表示，省會城市用黑色圓點表示，等等。本質上，這就是一種“內容”與“表現形式”對應關係。在網頁上，也同樣存在著這樣的對應關係，例如h1標題用藍色文字表示，h2標題用紅色文字表示。因此為了使CSS規則與HTML元素對應起來．就必須定義一套完整的規則，實現CSS對HTML的“選擇”。這就是叫做“選取器”的原因。

在CSS中，有幾種不同類型的選擇，本節先來介紹“基本”選取器。所謂“基本”，是相對於下一節中要介紹的“複合”選取器而言的。也就是說”複合”選取器是通過對基本選取器進行組合而構成的的。

基本選取器有標記選取器，類別選取器和ID選取器3種，下面詳細介紹。

一、標記選取器

一個HTML頁面由很多不同的標記組成，CSS標記選取器用來聲明哪些標記採用哪種CSS樣式。因此，每一種HTML標記的名稱都可以作為相應的標記選取器的名稱。例如，p選取器就是用於聲明頁面中所有<p>標記的樣式風格。同樣可以通過h1選取器來聲明頁面中所有的<h1>標記的CSS風格，如下所示：

  1. <style> 
  2. h1{ 
  3.     color:#FF0000; 
  4.     font-size:24px; 
  5. } 
  6. /*
  7. 選取器{
  8. 屬性:值;
  9. ……
  10. }
  11. */
  12. </style> 

以上這段CSS代碼聲明了HTML頁而巾所有的<h1>標記。文字的顏色都採用紅色，大小都為24px。每-個CSS選取器都包含選取器本身、屬性和值，其中屬性和值可以設定多個，從而實現對同一個標記聲明多種樣式風格，如上樣本所示。

如果希望所有<h1>標記不再採用紅色，而是藍色，這時僅僅需要將屬性color的值修改為blue即可全部生效。

注意：CSS語言對於所有屬性和值都有相對嚴格的要求，如果聲明的屬性在CSS規範中不存在，或者某個屬性的值不符合該屬性的要求，都不能使CSS語句失效。下面是一些典型的錯誤語句：

  1. Head-height:48px /*非法屬性*/ 
  2. color:ultraviolet /*非法值*/ 

對於上面提到的這些錯誤，通常情況下可以直接利用CSS編輯器(如Dreamweaver或Expression Web）的文法提示功能避免，但某些時候還需要查閱CSS手冊，或者直接登入W3C的官方網站（http://www.w3.org/）來查閱CSS的詳細規格說明。lodidance.com

返回頂部

二、類別選取器

在上一小節中提到的標記選取器一旦聲明，那麼頁面中所有的該標記都會相應地產生變化。例如當聲明了<p>標記為紅色時，頁面中所有的<p>標記都將顯示為紅色。但是如果希望其中的某一個<p>標記不是紅色，而是藍色，僅依靠標記選取器是不夠的，還需要引入類別( class)選取器。

例如，當頁面中同時出現3個<p>標記時，如果想讓它們的顏色各不相同，就可以通過設定不同的class選取器來實現。一個完整的案例如下所示，執行個體檔案位於網頁學習網CSS教程資源的“第1章\樣本5.htm”。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>網頁學習網樣本5-class選取器</title> 
  7. <style type="text/css"> 
  8. .red{ 
  9.     color:red; /*紅色*/ 
  10.     font-size:18px;  /*文字大小*/ 
  11. } 
  12. .green{ 
  13.     color:green; 
  14.     font-size:20px; 
  15. } 
  16. /* 
  17. .class 類別選取器{ 
  18.     屬性:值; 
  19.     …… 
  20. } 
  21. */ 
  22. </style> 
  23. </head> 
  24. <body> 
  25. <p class="red">class選取器1</p> 
  26. <p class="green">class選取器2</p> 
  27. <p class="green">h1同樣適用</p> 
  28. </body> 
  29. </html> 

其顯示效果1所示。可以看到兩個<p>標記分別呈現出了不同的顏色和字型大小，而且任何一個class選取器都適用於所有HTML標記，只需要用HTML標記的class屬性聲明即可，例如<h1>標記同樣使用了.green這個類別。

 


圖1 類別選取器樣本
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>網頁學習網樣本6-class選取器與標記選取器</title> 
  7. <style type="text/css"> 
  8. p{ /*標記選取器*/ 
  9.     color:blue;  
  10.     font-size:18px;   
  11. } 
  12. .special{ 
  13.     color:red; 
  14.     font-size:20px; 
  15. } 
  16. </style> 
  17. </head> 
  18. <body> 
  19. <p>class選取器與標記選取器1</p> 
  20. <p class="special">class選取器與標記選取器2</p> 
  21. <p>class選取器與標記選取器3</p> 
  22. </body> 
  23. </html> 

首先通過標記選取器定義<p>標記的全域顯示方案，然後再通過一個class選取器對需要突出的<p>標記進行單獨設定，這樣大大提高了代碼的編寫效率，其顯示效果2所示。


圖2 兩種選取器配合

在HTML的標記中，還可以同時給一個標記運用多個class類別選取器，從而將兩個類別的樣式風格同時運用到一個標記中。這在實際製作網站時往往會很有用，可以適當減少代碼的長度，如下例所示，樣本檔案位於網頁學習網CSS教程中“第1章\07,htm”。lodidance.com

  1. <html> 
  2. <head> 
  3. <title>網頁學習網-同時使用兩個class</title> 
  4. <style type="text/css"> 
  5. .one{ 
  6.     color:blue;     /* 顏色 */ 
  7. } 
  8. .two{ 
  9.     font-size:22px; /* 字型大小 */ 
  10. } 
  11. </style> 
  12. </head> 
  13. <body> 
  14.     <h4>一種都不使用</h4> 
  15.     <h4 class="one">同時使用兩種class，只使用第一種</h4> 
  16.     <h4 class="two">同時使用兩種class，只使用第二種</h4> 
  17.     <h4 class="one two">同時使用兩種class，同時使用</h4> 
  18.     <h4>一種都不使用</h4> 
  19. </body> 
  20. </html> 

顯示效果3所示，可以看到使用第1種class的第2行顯示為藍色，而第3行則仍為黑色，但由於使用了.two，因此字型變大。第4行通過“class="ne two"”將兩個樣式同時加入，得到藍色大字型。第1行和第5行沒有使用任何樣式，僅作為對比時的參考。


圖3 同時使用兩種CSS風格

返回頂部

三、ID選取器

ID選取器的使用方法與class選取器基本相同；不同之處在於ID選取器只能HTML頁面中使用一次，因此其針對性更強。在HTML的標記中只需要利用id屬性，就可以直接調用CSS中的ID選取器。

下面舉一個實際案例，樣本檔案位於網頁學習網CSS教程資源中”第1章\08.htm”。

  1. <html> 
  2. <head> 
  3. <title>網頁學習網-ID選取器</title> 
  4. <style type="text/css"> 
  5. #one{ 
  6.     font-weight:bold;       /* 粗體 */ 
  7.     } 
  8. #two{ 
  9.     font-size:30px;         /* 字型大小 */ 
  10.     color:#009900;          /* 顏色 */ 
  11.     } 
  12. </style> 
  13. </head> 
  14. <body> 
  15.     <p id="one">ID選取器1</p> 
  16.     <p id="two">ID選取器2</p> 
  17.     <p id="two">ID選取器3</p> 
  18.     <p id="one two">ID選取器3</p> 
  19. </body> 
  20. </html> 

顯示效果4所示，第2行與第3行都顯示了CSS的方案。可以看出，在很多瀏覽器下，ID選取器可以用於多個標記，即每個標記定義的id不只是CSS可以調用，JavaScript等其他指令碼語言同樣也可以調用。因為這個特性，所以不要將ID選取器用於多個標記．否則會出現意想不到的錯誤。如果一個HTML中有兩個相同id的標記，那麼將會導致JavaScript在尋找id時出錯，例如函數getElementByld()。


圖4 ID選取器樣本

正因為JavaScript等指令碼語言也能凋用HTML中設定的id．所以ID選取器一直被廣泛地使用。網站建設者在編寫CSS代碼時，應該養成良好的編寫習慣，一個id最多其能賦予一個HTML標記。

另外從圖4中還可以看到，最後一行沒有任何CSS樣式風格顯示，這意味著ID選取器不支援像class選取器那樣的多風格同時使朋，類似“id="one

返回頂部

點擊下載第1~7章CSS教程資源 返回《CSS教程布局之道》教程列表
編輯：網頁學習網
本文地址:http://www.lodidance.com/css/jc/657.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More