CSS selector 中文稱為 「CSS 選取器」或 「CSS 選擇器」,其中有一種方法叫作CSS 選擇器群組化,當我們的 CSS 樣式裡面有很多設計類似或相同的 CSS 選擇器,我們可以把這幾個不同的 CSS 選擇器 合併在一起,達到 CSS 語法優化、CSS 語法簡化,是 CSS 語法的基本功能之一,同時也可以達到提昇網頁開啟速度的效果喔。

CSS選取器 的群組化把好幾個不同的 CSS選取器 合併在一起
常常我們的 CSS selector 選取器中會有好幾個不同的 CSS selector 選取器地方需要使用到相同的設定時,一個一個分開寫會是一件滿累人的工作,重覆性太高且顯得冗長,更不好管理….
在 CSS 語法的基本設定中,就可以把這幾個相同設定的CSS選擇器合併在,群組化在一起,原本可能是寫了 7~8 行相同的語法,合在一起後就只要短短的一小行,怎麼看都讓人心曠神怡啊~
一:原始的 CSS 語法
例如:當有好幾個CSS選擇器剛好都需要把文字的顏色設定為灰色的時候,一個一個分開寫的方法式,感覺就很繁瑣,如下:
h1 { color:#666666; }
h2 { color:#666666; }
h3 { color:#666666; }
h4 { color:#666666; }
ul { color:#666666; }
p { color:#666666; }
#AAA { color:#666666; }
#BBB { color:#666666; }
二: CSS 選擇器群組化
CSS selector 選擇器群組化:把這幾個 CSS selector 選擇器使用逗號合併在一起,就只要短短的一小行,如下:
h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#666666; }
使用「群組化」選擇器 可以使我們的 CSS 樣式變得比較簡潔,將來又好管理和方便修改,這種寫法是 CSS 語法最基礎的功能之一,只要把這一些基礎的用法都熟悉了,同學們自然而然就可以練出漂亮的 CSS 樣式嘍~
我們還有更多的 CSS 文章,請參考 CSS 教學區 http://www.flycan.com/article/css/
更多的 CSS Selector 教學,請參考 https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!