CSS(層疊樣式表)是一種用于頁(yè)面內(nèi)渲染 HTML,XML 等的一種基礎(chǔ)語(yǔ)言,而選擇器更是學(xué)習(xí) CSS 的重中之重,選擇器能對(duì)相應(yīng)的元素進(jìn)行選擇,從而開(kāi)始添加我們想要的樣式,選擇器可以進(jìn)行單個(gè)元素或多個(gè)元素的渲染效果,用合適的選擇器能事半功倍,大大節(jié)省編輯時(shí)間,接下來(lái)我們來(lái)具體說(shuō)說(shuō) CSS 中的基礎(chǔ)選擇器。
五大基礎(chǔ)選擇器
1.通配符選擇器
通配符選擇器可以選擇頁(yè)面上的所有元素,并對(duì)他們應(yīng)用想要的樣式,用 * 來(lái)表示。但不建議使用,IE6不支持,給大型網(wǎng)站增加負(fù)擔(dān)。
語(yǔ)法:* {屬性:值}
* { color : red ; } <!--頁(yè)面中的元素都會(huì)變紅色-->
* { font-size : 30px ; } <!--頁(yè)面中的字體都會(huì)變成30px-->
2.標(biāo)簽選擇器(元素選擇器)
一個(gè)完整的HTML頁(yè)面是由很多不同的標(biāo)簽組成。標(biāo)簽選擇器可以直接設(shè)置HTML元素的樣式,比如h1、td、p、a,甚至可以是html本身。
語(yǔ)法:標(biāo)簽名 { 屬性:值 }
h1 { color : blue ;} <!--所有h1標(biāo)簽變藍(lán)色-->
a { text-decoration : none ; } <!--所有鏈接沒(méi)有下劃線-->
3.ID選擇器
ID選擇器可以為標(biāo)有特定ID的HTML元素指定特定的樣式。根據(jù)元素ID來(lái)選擇元素,具有唯一性,這說(shuō)明一個(gè)ID在一個(gè)頁(yè)面內(nèi)只能出現(xiàn)一次,ID選擇器以“#”來(lái)定義,在HTML中用 id 來(lái)引用
語(yǔ)法:#id屬性值 { 屬性:值 }
CSS代碼:#demo { color : green ; } <!--使 id 為 demo 的元素字體變?yōu)榫G色-->
HTML代碼:<p id="demo">我會(huì)變成綠色</p>
4.類(lèi)選擇器
類(lèi)選擇器使用類(lèi)名來(lái)選擇元素,前提是要在HTML代碼中給元素添加一個(gè)class的屬性,class="類(lèi)名",然后在CSS代碼中使用 " . " 進(jìn)行標(biāo)識(shí),后面緊跟類(lèi)名
語(yǔ)法:.class屬性值 { 屬性:值 }
CSS代碼:.text { color : gray ; } <!--使 class 為 text 的元素字體變?yōu)?yellow-->
HTML代碼:<p class="text">我會(huì)變成灰色</p>
5.群組選擇器
當(dāng)幾個(gè)元素樣式屬性一樣時(shí),可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔。要注意逗號(hào)是為了告訴瀏覽器規(guī)則中包含多個(gè)不同的選擇器,如果沒(méi)有這個(gè)逗號(hào)意義就完全不同了,就會(huì)變成后代選擇器,這點(diǎn)要注意。
CSS代碼:.demo , p { color : pink ; }
HTML代碼:<p>我會(huì)變粉色</p><div class="demo">我也會(huì)變粉色</div>
邊學(xué)習(xí)邊做實(shí)例是最有效果的,珍藏多年的高效CSS選擇器視頻教程,忍痛分享給大家:
還有微課,在線編輯效果一目了然,竟然還能得到w3cschool的證書(shū),何樂(lè)而不為呢
HTML + CSS 進(jìn)階實(shí)戰(zhàn)