CSS selector 選擇符是我們進(jìn)行CSS網(wǎng)頁(yè)布局的基礎(chǔ)。CSS selector到底有哪些，如何合理的運(yùn)用呢？選擇符可以分為三類，除了第一類HTML selector之外，其它兩類我們是可以自己命名的，在進(jìn)行命名時(shí)，注重包含語(yǔ)義，或者添加必要的注釋，使我們的代碼更清楚，易讀。

HTML selector 標(biāo)簽選擇符

HTML selector就是HTML的標(biāo)簽，如：DIV，TD，P，H1等等，如你用 CSS 定義了它們，在CSS文章所控制的頁(yè)面中這個(gè)標(biāo)簽的性質(zhì)就按照你的定義來(lái)顯示。

比如我們想叫H1的顏色是紅的，則：H1 {color: red}。這里我們學(xué)習(xí)一個(gè)CSS的特點(diǎn)，它可定義好幾個(gè) selector在一個(gè)rule里。如：H1, H2, TD {color: red}。這個(gè)定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色。在具體使用中，可以將幾個(gè)設(shè)置相同的屬于合并起來(lái)編寫(xiě)，減小我們的代碼。

Class selector 類選擇符

Class selector有兩種，一種叫相關(guān) class selector，它跟一個(gè) HTML 的標(biāo)簽有關(guān)系它的語(yǔ)法是tag.Classname {property:value}。如：我們想設(shè)置一些而不是全部 H1 的顏色是紅的 H1.redone {color: red}則：第一個(gè) H1 是紅色的，而第二個(gè)就不是了。

第二種是獨(dú)立class selector。它可被任何 HTML標(biāo)簽所應(yīng)用。它的語(yǔ)法如下 .Classname {property:value}假如我們有下面這個(gè)定義.blueone {color: blue}那么我們可以把他應(yīng)用到不同的標(biāo)簽中去。非常明顯class selector 給了我們更多的自由與發(fā)揮的空間。

ID selector ID選擇符

ID selector 其實(shí)跟獨(dú)立 class selector 的功能很相似。而區(qū)別在于它們的語(yǔ)法和用法不同，以及對(duì)于 javascript 操縱 HTML元素有幫助。我們?cè)诓季种校瑢?duì)不同的結(jié)構(gòu)區(qū)域的定義，往往用ID選擇符。

它的語(yǔ)法如下#IDname {property:value}。假如我們有下面的定義#yelowone {color: yellow}。我們可以運(yùn)用這個(gè)定義到任何的有同樣 ID 名字的標(biāo)簽，如：text here你可能覺(jué)得既然 ID selector 和獨(dú)立 class selector 功能一樣，為什么兩者都存在呢？有 ID 的 HTML元素可以被JavaScript來(lái)操縱。

• css
• 布局