一.什么是ID選擇器和類選擇器
作為CSS選擇器的最主要的兩大選擇器:ID選擇器主要指的是通過DOM(Document Object Model)節點的ID選取節點,例如代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID選擇器</title> 6 <style type="text/css"> 7 #box{ 8 background-color: #0000FF; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"></div> 14 </body> 15 </html>
在CSS中使用ID選擇器需要通過"#"+"id名稱".類選擇器(有的也稱為class選擇器)主要指的是通過DOM(Document Object Model)節點的類名(class)選取節點,例如代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID選擇器</title> 6 <style type="text/css"> 7 .box{ 8 background-color: #0000FF; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="box"></div> 14 </body> 15 </html>
在CSS中使用類選擇器需要通過"."+"類名".
二.ID選擇器和類選擇器的異同
相同點
兩者選擇器均能夠選取到DOM節點並給DOM節點添加樣式.
不同點
- 每個DOM節點允許有多個class,但是一般只允許擁有一個ID.一個DOM節點擁有多個class自然會產生樣式的疊加,那么如果一個DOM節點擁有多個ID會出現什么情況?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID選擇器</title> 6 <style type="text/css"> 7 #bgbox{ 8 background-color: #0000FF; 9 } 10 #widthbox{ 11 width: 100px; 12 height: 100px; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="bgbox widthbox"></div> 18 </body> 19 </html>
根據測試,發現瀏覽器(測試時使用的Chrome)窗口預覽的時候發現div的樣式既沒有顏色也沒有寬度高度,這就說明一個DOM節點是不允許擁有多個ID
- ID選擇器對DOM節點的樣式控制的優先級高於類選擇器。
- 在符合W3C標准的頁面中,ID選擇器選取DOM節點的數量≤1,類選擇器的選取DOM節點的數量可能為0,也可能為N(N≥1)。
三.ID選擇器和類選擇器的合理使用
- ID唯一性,不能給多個DOM設置同一個ID.即不能通過ID選擇器去控制多個DOM節點.雖然在測試代碼
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>ID選擇器</title> 7 <style type="text/css"> 8 #bgbox{ 9 background-color: #0000FF; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="bgbox" style="width: 100px;height: 100px;"></div> 16 <div id="bgbox" style="width: 200px;height: 100px;"></div> 17 </body> 18 19 </html>
發現兩個div都被設置上了顏色，但是這是不符合規范的。ID必須能夠唯一的確定DOM節點！！
- 在編寫樣式時盡量使用類選擇器，即使該DOM節點可能只出現一次。因為ID選擇器的優先級比類選擇器高,在后期樣式的控制中會越來越難控制。也許有人會問：我可不可以全篇都使用ID選擇器，那么就不存在和類選擇器比較優先級了。理論上這是可以的，但是請注意上一點——ID必須能夠唯一的確定DOM節點。如果你全篇都使用ID選擇器，那么即使兩個DOM節點樣式完全相同，那么你也必須把節點樣式寫兩遍, 如果后期要進行維護,那么你必須對兩處的代碼都進行維護！！！極大的增加了維護的成本。
- 既然有了類選擇器為什么還要規定一個ID選擇器？在一個完整的HTML+CSS+JavaScript的頁面體系中，對一個DOM節點的ID使用最多的其實是JavaScript(因為通過ID能唯一的確定DOM節點，方便控制),CSS中的使用的ID選擇器一般情況下只會添加少量樣式，更多對DOM節點的樣式控制都是使用類選擇器,既能夠產生樣式疊加,又方便后期的維護。請盡量避免在CSS中使用大量的ID選擇器
- 常規情況下，CSS中會出現大量的ID選擇器的情況——JavaScript插件配套的樣式表中。