CSS 教學:CSS 選擇器(選取器) -群組化

CSS selector 中文稱為 「CSS 選取器」或 「CSS 選擇器」,其中有一種方法叫作CSS 選擇器群組化,當我們的 CSS 樣式裡面有很多設計類似或相同的 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

 

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , , .

留言功能已關閉。