CSS 基本選擇器
在 CSS 中,選擇器是一種模式,用于選擇需要添加樣式的元素。 ? ? ? ?
屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。
三種基本的選擇器類型:標(biāo)簽名選擇器、類選擇器、ID選擇器
注意:在標(biāo)簽內(nèi)寫(xiě)入style=" "的方式,應(yīng)該是CSS的一種引入方式,而不是選擇器,因?yàn)楦揪蜎](méi)有用到選擇器。?
1:標(biāo)簽名選擇器?
一個(gè)HTML文檔中有許多標(biāo)簽,例如p標(biāo)簽,h1標(biāo)簽等。若要使文檔中的所有p標(biāo)簽都使用同一個(gè)CSS樣式,就應(yīng)使用標(biāo)簽選擇器。?
html {color:black;}
h1 {color:blue;}
p2{color:silver;}
即直接使用HTML標(biāo)簽作為選擇器。
2:類選擇器?
使用標(biāo)簽選擇器可以為整個(gè)HTML文檔中的同一個(gè)標(biāo)簽指定相同的CSS樣式。但是在實(shí)際運(yùn)用中,HTML文檔中的同一個(gè)標(biāo)簽會(huì)被反復(fù)使用。若要為相同的標(biāo)簽賦予不同的CSS樣式就應(yīng)使用類選擇器。?
<div class="test">測(cè)試代碼</div>?
.test {color:red;border:1px blue solid;}?
在html文檔里,我們?cè)谝刂茦邮降臉?biāo)簽的開(kāi)標(biāo)簽(非成對(duì)標(biāo)簽如input直接放在標(biāo)簽里)里加入 class="xxx",在頁(yè)面對(duì)應(yīng)的css文件里,用.xxx就可以指向這個(gè)標(biāo)簽,從而對(duì)這個(gè)標(biāo)簽進(jìn)行控制,我們稱這種通過(guò)定義類(class)來(lái)找到標(biāo)簽的方式為 :類選擇器。?
這種定義class 的方式是前端開(kāi)發(fā)最常用的選擇器,有幾個(gè)突出的特點(diǎn):可以給不同的標(biāo)簽設(shè)置同一個(gè)類,從而用一條CSS命令控制幾個(gè)標(biāo)簽,減少大量代碼,是頁(yè)面修改簡(jiǎn)單,易維護(hù),易改版;其次,后臺(tái)工作人員機(jī)會(huì)不會(huì)用到有關(guān)class的相關(guān)設(shè)置,不需要跟后臺(tái)人員之間進(jìn)行交互;再者,可以通過(guò)js等動(dòng)態(tài)改變標(biāo)簽的Classname,從而改變整個(gè)標(biāo)簽的樣式,使前端動(dòng)態(tài)效果實(shí)現(xiàn)起來(lái)更為容易。?
3:ID選擇器?
ID選擇器和類選擇器相似,不同的是,ID選擇器不能復(fù)用。在一個(gè)XHTML文檔中,一個(gè)ID選擇器只能把其CSS樣式指定給一個(gè)標(biāo)簽。?
<div id="test">測(cè)試代碼</div>?
#test {color:red;border:1px blue solid;}?
有 ID 的 HTML元素可以被JavaScript來(lái)操縱.再就是ID也是后臺(tái)開(kāi)發(fā)人員會(huì)經(jīng)常用的,所以前端開(kāi)發(fā)人員應(yīng)該盡量少的使用。?