Site Loader

現在前端工程師要來教你什麼是所謂父元素及子元素!!讓你減少寫CSS的時間!!

現在前端工程師要來教你什麼是所謂父元素及子元素!!讓你減少寫CSS的時間!!
現在前端工程師要來教你什麼是所謂父元素及子元素!!讓你減少寫CSS的時間!!


父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:

父子元素一次輸入

前端工程師HTML使用 Emment 在設定子元素時非常方便,只要在父子元素間加入 > 符號就可以。就像下方的動態圖所示:假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p,並在 p 中在加上孫元素 ol 與 li 等動作,只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完!


Emmet-父子元素一次輸入

兄弟階層一次輸入

承上面「父子元素一次輸入」的範例,若想在 p 的上方放置 h2 標題,但是 h2 標題不屬於 p 的父元素,位階是跟 p 同等的,則 h2 與 p 互為兄弟元素。

上方提到:元素間互為父子關係則用 > 隔開;若為兄弟元素,就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」


Emmet-兄弟階層一次輸入

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例,若前端工程師想在互為兄弟階層的 h2+p 的階層下,再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做?那就把 h2+p 視為一個群組,用 () 括號的方式包起來,把用括號起來元素視為同一階層來看即可,所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」以後再按 ctrl+E 即可。


Emmet-如何設群組

上一層

承上面「群組 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 即可。


Emmet上一層的範例

本例的 div 元素使用 ^ 符號來往上爬一個階層,如果想要爬兩層的話,就是 ^^ 符號。

想成為前端工程師,這些快速鍵要記得多練習幾次,熟練和熟悉後才能在編寫 HTML 時更有效率。

 

推薦閱讀:

前端工程師必知RWD語法8:像水一樣的圖片嗎?真特別!!

前端工程師RWD三部曲(一)-RWD與傳統網頁開發的區別?

前端工程師RWD三部曲(二)-“優雅”與”增強”有什麼涵義?

鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了

透過對的Java課程,讓你從茫然的畢業生中脫穎而出!

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

達內教育開幕 培養台灣IT人才進入全球企業

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *