【CSS選擇符】群組選擇符 和 通用選擇符

微信訂閱號:rabbit_svip

有時候我們需要一種簡單的方式把相同的格式應(yīng)用到不同的元素上。例如,可能想讓網(wǎng)頁中的所有標(biāo)題使用相同的顏色和字體顯示。如果分別為每一級標(biāo)題(h1, h2, h3, h4等)定義樣式,工作量會很大,如果日后要修改所有標(biāo)題的顏色,要修改6個不同的樣式。
遇到這種需求時,最好使用群組選擇符,把一個樣式指定給多個選擇符。


群組選擇符

群組選擇符由一系列逗號分開的選擇符組成。因此,如果想讓所有標(biāo)題都使用相同的顏色,可以編寫如下規(guī)則:

CSS代碼:

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

群組選擇符中可以使用任何有效的選擇符(可以多種選擇符混用)。例如,把相同的文字顏色應(yīng)用到<h1>標(biāo)簽、<p>標(biāo)簽、類為.copyright的標(biāo)簽和ID為#banner的標(biāo)簽上。

CSS代碼:

h1, p, .copyright, #banner {
    color: #1574A8;
}

如果網(wǎng)頁中的多個元素只要共用部分格式屬性,可以使用群組選擇符編寫共用的那部分,再分別為各個選擇符編寫專屬的屬性。






通用選擇符(星號)

通用選擇符可以理解成超級群組選擇符。
通用選擇符的作用是選取所有標(biāo)簽。

比如最常用的是讓所有元素的margin和padding默認為0,可以這樣寫:

CSS代碼:

* {
    margin: 0;
    padding: 0;
}

通用選擇器不指定任何具體的標(biāo)簽類型,因此很難預(yù)測對使用各種HTML標(biāo)簽的網(wǎng)站有什么影響。
所以通用選擇器里面的樣式不要寫得太過分,把一些基礎(chǔ)的東西寫在里面就行。比如規(guī)定margin、padding、font-size等。

濫用通用選擇符,很可能會加大瀏覽器的渲染壓力。



HTML與CSS 目錄:HTML與CSS

上一篇:【CSS選擇符】類選擇符 和 ID選擇符

下一篇:【CSS選擇符】后代選擇符

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • CSS通用類和“關(guān)注點分離” - 眾成翻譯http://www.zcfy.cc/article/css-utili...
    葡萄喃喃囈語閱讀 746評論 0 6
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,663評論 0 30
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,381評論 25 708
  • 簡芯,25歲,幼時遭遺棄,被一對夫婦收養(yǎng),養(yǎng)父母親年愈七十,生有兩女一男,簡芯是家中老幺,現(xiàn)與養(yǎng)父母,還有哥哥簡明...
    皮皮七閱讀 688評論 1 3
  • 武: 武術(shù)=功夫,一般不言語表,大多數(shù)都是內(nèi)功。內(nèi)功的修煉需要“耐心”“穩(wěn)定”!時間是一個考驗自己的維度,這是自己...
    和黑與您閱讀 472評論 0 1