CSS選擇器教程

時(shí)間：2023-04-01 16:12:20 CSS 我要投稿

相關(guān)推薦

CSS選擇器教程

　　上節(jié)課我們講了一下CSS通過(guò)什么方式去控制頁(yè)面，如果不記得，我來(lái)幫大家回憶一下，總共有四種方式行內(nèi)方式、內(nèi)嵌方式、鏈接方式、導(dǎo)入方式，大家通過(guò)這四種方式就可以實(shí)現(xiàn)CSS對(duì)HTML頁(yè)面樣式的控制，如果要讓這些樣式對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，這就需要用到CSS選擇器，HTML頁(yè)面中的元素就是通過(guò)CSS選擇器進(jìn)行控制的。

　　CSS選擇器共有三種：標(biāo)簽選擇器、ID選擇器、類選擇器。

　　為了后面的對(duì)選擇器的解釋更容易理解，在這里先打個(gè)比喻，如果把你所處的環(huán)境視為HTML頁(yè)面的話，環(huán)境里的每一個(gè)人則相當(dāng)于HTML頁(yè)面內(nèi)標(biāo)簽元素，每個(gè)人都有一個(gè)ID(身份證)，那么html中的每一個(gè)標(biāo)簽也都有自己的ID，大家都知道ID是唯一的，不可能重復(fù)。

　　【標(biāo)簽選擇器】

　　一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的CSS樣式，(在大環(huán)境中你可能出于不同的位置，但是不管怎么樣，你總是穿著同一套衣服，這件衣服就是由標(biāo)簽選擇器事先給你限定好的，不管走到哪里都是這身衣服)比如，在style.css文件中對(duì)p標(biāo)簽樣式的聲明如下：

　　font-size:12px;

　　background:#900;

　　color:090;

　　}

　　則頁(yè)面中所有p標(biāo)簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護(hù)中，如果想改變整個(gè)網(wǎng)站中p標(biāo)簽背景的顏色，只需要修改background屬性就可以了，就這么容易！

　　【ID選擇器】

　　ID選擇器在某一個(gè)HTML頁(yè)面中只能使用一次(當(dāng)然也可以用好幾次，不過(guò)就不符合W3C標(biāo)準(zhǔn)了，那頁(yè)面也就不是標(biāo)準(zhǔn)頁(yè)面嘍~，咱們的目的不就是為了做標(biāo)準(zhǔn)的頁(yè)面么，所以建議大家不要在同一個(gè)html頁(yè)面中多個(gè)標(biāo)簽擁有共同的ID)，就像在你所處的環(huán)境中，你只有一個(gè)ID(身份證)，不可能重復(fù)！相信大家也能看出來(lái)，ID選擇器更具有針對(duì)性，如：

　　先給某個(gè)HTML頁(yè)面中的某個(gè)p標(biāo)簽起個(gè)ID，代碼如下：

　　此處為p標(biāo)簽內(nèi)的文字

　　在CSS中定義ID為one的p標(biāo)簽的屬性，就需要用到#，代碼如下：

　　#one{

　　font-size:12px;

　　background:#900;

　　color:090;

　　}

　　這樣頁(yè)面中的某個(gè)p就會(huì)是CSS中定義的樣式。

　　【類選擇器】

　　這種選擇器更容易理解了，就是使頁(yè)面中的某些標(biāo)簽(可以是不同的標(biāo)簽)具有相同的樣式，就像國(guó)慶中某個(gè)方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環(huán)，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎么做呢~呵呵，和ID選擇器的用法類似，只不過(guò)把id換做class，如下：

　　此處為p標(biāo)簽內(nèi)的文字

　　如果我還想讓div標(biāo)簽也有相同的樣式，怎么辦呢？加上同樣的class就可以了，如下

　　此處為p標(biāo)簽內(nèi)的文字

　　這樣頁(yè)面中凡是加上class="one"的標(biāo)簽，樣式都是一樣的嘍~CSS定義的時(shí)候和ID選擇器差不多，只不過(guò)把#換成.，如下

　　.one{

　　font-size:12px;

　　background:#900;

　　color:090;

　　}

　　補(bǔ)充:一個(gè)標(biāo)簽可以有多個(gè)類選擇器的值，不同的值用空格分開，如：

　　此處為p標(biāo)簽內(nèi)的文字

　　這樣我們可以將多個(gè)樣式用到同一個(gè)標(biāo)簽中，當(dāng)然也可以，ID和class一塊用

　　此處為p標(biāo)簽內(nèi)的文字

　　【通用選擇器】

　　到這里，前三種基本的選擇器說(shuō)完了，但是還需要給大家介紹一個(gè)CSS選擇器中功能最強(qiáng)大但是用的最少的一種選擇器“通用選擇器”

　　*{此處為CSS代碼}

　　強(qiáng)大之處是因?yàn)樗麑?duì)父級(jí)中的所有HTML標(biāo)簽進(jìn)行樣式定義，可對(duì)具有共同樣式的標(biāo)簽樣式進(jìn)行定義(有點(diǎn)小學(xué)數(shù)學(xué)中的提取公因式)，這樣可以大大精簡(jiǎn)代碼；既然有這么強(qiáng)大的功能為什么是用的最少呢，同樣還是因?yàn)樗膹?qiáng)大，他是對(duì)父級(jí)元素內(nèi)的所有標(biāo)簽進(jìn)行定義，所以只要你定義了，那么父級(jí)里面的所有的標(biāo)簽，甭管有沒有必要，也都相當(dāng)于加上了通用選擇器里面的代碼了，能這么說(shuō)大家不能夠完全理解，沒關(guān)系，我給大家舉個(gè)例子，請(qǐng)看下面

　　這里是p標(biāo)簽區(qū)域

　　這里是a標(biāo)簽區(qū)域

　　這里是p標(biāo)簽區(qū)域

　　這里是a標(biāo)簽區(qū)域

　　大家運(yùn)行一下上面的例子，div1里面的兩個(gè)標(biāo)簽是不是樣式一樣，這就是通用選擇器的強(qiáng)大之處，不管里面有多少個(gè)標(biāo)簽都會(huì)將樣式加到所有標(biāo)簽內(nèi)，如果div1里面得所有的標(biāo)簽都有一部分相同的CSS代碼，那么可以把這部分代碼提取出來(lái)，用通用選擇器來(lái)定義，這樣可以大大縮減代碼，但是如果div1里面只要有一個(gè)和其他元素沒有相同的代碼，就不能用通用選擇器來(lái)定義，這也就是CSS通用選擇器不靈活的一點(diǎn)�，F(xiàn)在大家明白為什么通用選擇器是選擇器里面功能最強(qiáng)大的但又是用的最少的選擇器了吧~~呵呵

　　對(duì)于通用選擇器還有一個(gè)不得不提的用法，就是為了保證作出的頁(yè)面能夠兼容多種瀏覽器，所以要對(duì)HTML內(nèi)的所有的標(biāo)簽進(jìn)行重置，會(huì)將下面的代碼加到CSS文件的最頂端

　　*{margin:0; padding:0;}

　　為什么要這么用呢，因?yàn)槊糠N瀏覽器都自帶有CSS文件，如果一個(gè)頁(yè)面在瀏覽器加載頁(yè)面后，發(fā)現(xiàn)沒有CSS文件，那么瀏覽器就會(huì)自動(dòng)調(diào)用它本身自帶的CSS文件，但是不同的瀏覽器自帶的CSS文件又都不一樣，對(duì)不同標(biāo)簽定義的樣式不一樣，如果我們想讓做出的頁(yè)面能夠在不同的瀏覽器顯示出來(lái)的效果都是一樣的，那么我們就需要對(duì)對(duì)HTML標(biāo)簽重置，就是上面的代碼了，但是這樣也有不好的地方，因?yàn)镠TML4.01中有89個(gè)標(biāo)簽，所以相當(dāng)于在頁(yè)面加載CSS的時(shí)候，先對(duì)這89個(gè)標(biāo)簽都加上了{(lán)margin:0; padding:0;}，在這里我不建議大家這么做，因?yàn)?9個(gè)標(biāo)簽中需要重置的標(biāo)簽是很少數(shù)，沒有必要將所有的標(biāo)簽都重置，需要哪些標(biāo)簽重置就讓哪些標(biāo)簽重置就可以了，如下

　　body,div,p,a,ul,li{margin:0; padding:0;}

　　如果還需要dl、dt、dd標(biāo)簽重置，那就在上面加上就可以了，如下

　　body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

　　用到那些就寫那些，這點(diǎn)也可以看做衡量頁(yè)面重構(gòu)師制作頁(yè)面水平的高低，以及是否專業(yè)的一個(gè)方面到這里大家更應(yīng)該明白這句話“通用選擇器是功能最強(qiáng)大但是用的最少的選擇器”了吧~^_^

　　OK！選擇器的內(nèi)容我向大家應(yīng)該都明白了，后面就繼續(xù)講解一下“選擇器的集體聲

　　明”和“選擇器的嵌套”

　　【選擇器的集體聲明】

　　在我們使用選擇器的時(shí)候，有些標(biāo)簽樣式是一樣的，或者某些標(biāo)簽都有共同的樣式屬性，我們可以將這些標(biāo)簽集體聲明，不同的標(biāo)簽用“,”分開，比如：

　　h1,h2,h3,h4,h5,h6{color:#900;}

　　#one,#three,.yellow{font-size:14px;}

　　#one{background:#ccc;}

　　#three{background:#ccc;}