前端工程師必備神器, 縮短你爆肝的時間! 本篇為教學文第二篇-父子階層與群組
上方提到：元素間互為父子關係則用 > 隔開；若為兄弟元素，就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」
本例的 div 元素使用 ^ 符號來往上爬一個階層，如果想要爬兩層的話，就是 ^^ 符號。
想成為前端工程師，這些快速鍵要記得多練習幾次，熟練後才能在編寫 HTML 時更有效率。
延伸閱讀：
前端工程師外掛神器Emmet使用教學(一)快速產生標籤名稱
前端工程師外掛神器Emmet使用教學(三)元素與流水編號
前端工程師外掛神器Emmet使用教學(四)顯示文字與自訂屬性
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺
厭世代正風行?來上Java課程可以幫你扭轉困境!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 |
| 前端工程師必備神器, 縮短你爆肝的時間! 本篇為教學文第二篇-父子階層與群組 |
父子兄弟階層、群組、上一層
這一篇有簡略說到父子階層（父元素與子元素）之間的關係。想成為前端工程師的同學們未來在處理網頁時，一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式：父子元素一次輸入
前端工程師在使用 Emment 在設定子元素時非常方便，只要在父子元素間加入 > 符號即可。如下方的動態圖所示：假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p，並在 p 中在加上孫元素 ol 與 li 等動作，只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完!兄弟階層一次輸入
承上面「父子元素一次輸入」的範例，如果想要在 p 的上方放置 h2 標題，但是 h2 標題並不屬於 p 的父元素的話，位階是跟 p 同等的，則 h2 與 p 互為兄弟元素。上方提到：元素間互為父子關係則用 > 隔開；若為兄弟元素，就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」
將元素設為同一階層的群組
承上面「兄弟階層一次輸入」的範例，若前端工程師想在互為兄弟階層的 h2+p 的階層下，再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做？那就把 h2+p 視為一個群組，用 () 括號的方式包起來，把用括號起來元素視為同一階層來看即可，所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。上一層
承上面 HTML「群組 Grouping」的範例，若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方，新增一個 div 父元素（class name 名為「news_p」以及 id 名為「paragraph2」），就可以在元素間加入 ＾ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。想成為前端工程師，這些快速鍵要記得多練習幾次，熟練後才能在編寫 HTML 時更有效率。
延伸閱讀：
前端工程師外掛神器Emmet使用教學(一)快速產生標籤名稱
前端工程師外掛神器Emmet使用教學(三)元素與流水編號
前端工程師外掛神器Emmet使用教學(四)顯示文字與自訂屬性
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺
厭世代正風行?來上Java課程可以幫你扭轉困境!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？