CSS selector 選擇符是我們進行CSS網頁布局的基礎。CSS selector到底有哪些，如何合理的運用呢？選擇符可以分為三類，除了第一類Html selector之外，其它兩類我們是可以自己命名的，在進行命名時，注重包含語義，或者添加必要的注釋，使我們的代碼更清楚，易讀。
Html selector 標簽選擇符
HTML selector就是Html的標簽，如：DIV，TD，P，H1等等，如你用 CSS 定義了它們，在CSS文章所控制的頁面中這個標簽的性質就按照你的定義來顯示。
比如我們想叫H1的顏色是紅的，則：H1 {color: red}。這裡我們學習一個CSS的特點，它可定義好幾個 selector在一個rule裡。如：H1, H2, TD {color: red}。這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色。在具體使用中，可以將幾個設置相同的屬於合並起來編寫，減小我們的代碼。
Class selector 類選擇符
Class selector有兩種，一種叫相關 class selector，它跟一個 Html 的標簽有關系它的語法是tag.Classname {property:value}。如：我們想設置一些而不是全部 H1 的顏色是紅的 H1.redone {color: red}則：第一個 H1 是紅色的，而第二個就不是了。
第二種是獨立class selector。它可被任何 Html標簽所應用。它的語法如下 .Classname {property:value}假如我們有下面這個定義.blueone {color: blue}那麼我們可以把他應用到不同的標簽中去。非常明顯class selector 給了我們更多的自由與發揮的空間。
ID selector ID選擇符
ID selector 其實跟獨立 class selector 的功能很相似。而區別在於它們的語法和用法不同，以及對於 Javascript 操縱 Html元素有幫助。我們在布局中，對不同的結構區域的定義，往往用ID選擇符。
它的語法如下#IDname {property:value}。假如我們有下面的定義#yelowone {color: yellow}。我們可以運用這個定義到任何的有同樣 ID 名字的標簽，如：text here你可能覺得既然 ID selector 和獨立 class selector 功能一樣，為什麼兩者都存在呢？有 ID 的 Html元素可以被JavaScript來操縱。