css分組選擇器的定義方式是怎么樣的?


css分組選擇器的定義方式是怎么樣的?分組選擇器選取所有具有相同樣式定義的 HTML 元素,用英文小寫逗號的 , 來分隔每個選擇器,舉例如下:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

已上代碼分別給元素h1、h2、p都設置了相同的兩個樣式定義:第一個是屬性text-align(水平對齊方式),對應的值center(居中);第二個是屬性color(顏色),對應的值red(紅色)。

這個時候,網友們最好是對選擇器進行分組,以最大程度地縮減代碼,寫法也很簡單,用英文小寫逗號的 , 來分隔每個選擇器即可:

h1, h2, p {
  text-align: center;
  color: red;
}

css分組選擇器的定義方式可以將任意多個選擇器分組在一起,對此沒有任何限制。

可能有些網友就會問了:范如樂,你上面舉例的是相同的樣式,如果不同的元素之間定義的樣式有一部分相同,而有一部分又不同應該怎么分組呢?

范如樂:原理是一樣的,把相同的那部分樣式分別進行分組即可,舉例如下:

h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}

分組后如下:

h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}

當然也可以這樣分:

h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

主要是看你分組的時候,取的是哪部分相同的屬性和值,上面3組樣式的顯示效果都是一樣的。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/7976.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: