對於我們前端人員來說，必須要注重的就是頁面的美觀，一個頁面的好看與否就肯定要看你css的樣式寫的水平怎麼樣，而要全面利用css寫好網頁當然也要熟悉css選擇器的使用，只有熟練掌握了css選擇器，才不至於在書寫css代碼的時候掉進坑裡。
最常見的CSS選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。如果設置HTML的樣式，選擇器通常將是某個HTML元素，比如p、h1、em、a，甚至可以是html本身。在W3C標准中，元素選擇器又稱為類型選擇器（type selector）,類型選擇器匹配文檔語言元素類型的名稱，類型選擇器匹配文檔樹中該元素類型的每一個實例。
類選擇器允許以一種獨立於文檔元素的方式來制定樣式，該選擇器可以單獨使用，也可以與其它元素結合使用。需要提到的是，只有適當地標記文檔後，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。如果你要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
下面說說對於我這個初學者最喜歡用的ID選擇器，ID選擇器允許以一種獨立於文檔元素的方式來制定樣式。在某些方面，ID選擇器類似於類選擇器，不過也有一些重要差別，首先，ID選擇器前面有一個“#”號，也稱為棋盤號或井號，在一個HTML文檔中，ID選擇器會使用一次，而且僅一次。第二個區別是ID選擇器不引用class屬性的值，毫無疑問，它要引用id屬性中的值。需要注意，類選擇器和ID選擇器可能是區分大小寫的，這取決於文檔的語言，HTML和XHTML將類和ID值定義為區分大小寫，所以類和ID值的大小寫必須與文檔中的相應值匹配。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素，如果希望選擇器有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。例如*[title] ; a[href];。屬性選擇器在XML文檔中相當有用，因為XML語言主張要針對元素和屬性的用途指定元素名和屬性名。請注意，這種格式要求必須與屬性值完全匹配，如果熟悉新內閣制包含用空格分隔的值列表，匹配就可能出現問題。
後代選擇器又稱包含選擇器，它可以選擇作為某元素後代的元素。我們可以定義後代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。有關後代選擇器有一個容易被忽視的方面，即兩個元素之間的層次間隔可以是無限的，例如，如果寫作 ul li，這個語法就會選擇從ul元素繼承的所有li元素，而不論li的嵌套層次多深。
與後代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素。如果你不希望選擇任意的後代元素，而是希望縮小范圍，只選擇某個元素的子元素，請選擇子元素選擇器，它的格式如 div>p,中間用“>”間隔。
相鄰兄弟選擇器可選擇緊接在另一元素後的元素，且兩者有相同父元素。相鄰兄弟選擇器使用率加號（+），即相鄰兄弟結合符，如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器( Adjacent sibing selector)。
在了解每個選擇器正確的使用方法後，再了解各類選擇器在HTML中的權重對於我們編寫樣式是非常有必要的，下面就是選擇器權重的一些例子：
1* {} /* a=0 b=0 c=0 d=0 ->優先級= 0,0,0,0 */
2li {} /* a=0 b=0 c=0 d=1 ->優先級 = 0,0,0,1 */
3li:first-line{} /* a=0 b=0 c=0 d=2 ->優先級 = 0,0,0,2 */
4ul li {} /* a=0 b=0 c=0 d=2 ->優先級 = 0,0,0,2 */
5ulol+li{} /* a=0 b=0 c=0 d=3 ->優先級 = 0,0,0,3 */
6h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 ->優先級 = 0,0,1,1 */
7ulolli.red{} /* a=0 b=0 c=1 d=3 ->優先級 = 0,0,1,3 */
8li.red.level{} /* a=0 b=0 c=2 d=1 ->優先級 = 0,0,2,1 */
9#x34y {} /* a=0 b=1 c=0 d=0 ->優先級 = 0,1,0,0 */
10style="" /* a=1 b=0 c=0 d=0 ->優先級 = 1,0,0,0 */
了解了這些你應該不會再對"11個class與一個id誰的優先級高"這類的問題有疑問了吧，因為a，b，c，d只是在各自位置數字的累加，而不會越級。其實，這裡還漏了一個重要的東西，那就是!important了，important可以讓前面所有的權重計算變得可笑，因為css屬性值添加了important後，前面所有的努力白費了行內式的權重也高不過它，除非再聲明一個加important的屬性值來覆蓋它。
當你了解了各類選擇器的使用及css內部權重問題後，那你css寫出來就不會郁悶的發現什麼也沒有了。