前端工程師需要一眼就看穿的CSS多重名稱,還搞不清楚就太遜了!

-
前端工程師需要一眼就看穿的CSS多重名稱,還搞不清楚就太遜了!
前端工程師朋友教會我的技能之一:分辨出相似的CSS多重名稱,我覺得超有用!
有時在 HTML 中，前端工程師們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示:

 
<div class="first second"></div>
對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎?

 
/*1. 兩個 class 中有空格*/  
.first .second
/*2. 兩個 class 中沒有空格*/
.first.second 
/*3. 兩個 class 中出現逗號*/  
.first,.second

對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：



 



1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定



See the Pen  .first與 .second中間有空格的例子 by Tedutw (@Tedutw) on CodePen.









2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定



See the Pen  .first與 .second中間無空格的例子 by Tedutw (@Tedutw) on CodePen.









3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定



See the Pen  .first與 .second中間有逗號的例子 by Tedutw (@Tedutw) on CodePen.





註 : 以上三個範例的 HTML 碼都一樣





延伸閱讀：







HTML繼承關係是什麼?想成為前端工程師快來看



前端工程師到底在幹嘛?今天這四種嵌入方法讓你更了解! 



想把網頁用的五顏六色?這篇讓你成為心目中的前端工程師! 



邀你認識「KISS 原則」神奇的網路行銷課程



你能分辨人工智慧製造的假新聞與文章嗎?



URL網址就像摩斯密碼,解構之後可是SEO優化利器!



人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？


























































這個網誌中的熱門文章









前端工程師設定CSS背景的五種方法(一)背景固定模式設定






-














圖片







            如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況!    CSS  background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動，而它有三種不同的呈現方案：     第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動     第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的     第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。     而 前端工程師 們通常會將CSS background-repeat 與  背景圖樣設定 (background-image)  搭配設計。     CSS background-attachment 基本語法如下：  background-attachment: 顯示參數;  而另外，有三種可以使用的顯示參數，來決定背景圖與網頁主體該以何種方式來搭配顯示，分別為  scroll （預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、 fixed （背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、 local （背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：   CSS background-attachment 各種參數的範例   See the Pen  background-attachment-example  by Tedutw ( @Tedutw ) on CodePen .     現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的 前端工程師 搭配「 background-repeat: no-repeat; 」參數使用，做出網頁主體都浮在高質感的背景圖的效果。              其他常用 CSS background 背景屬性說明連結  1. 背景顏色設定 (background-color)  2. 背景圖樣設定 (background-image)  3. 背景重複設定 (background-repeat)  4. 背景固定模式設定 (b








閱讀完整內容










前端工程師設定CSS背景的五種方法(五)設定背景顏色






-














圖片







        設定背景顏色原來對前端工程師來說超必須!這篇文章讓你超容易入門!     使用背景顏色設定 (background-color)屬性， 前端工程師 可利用之，讓簡潔的純色背景襯托出網頁的主體，也可決定網頁的風格。像是背景純黑的網頁，與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以讓前端工程師用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。       CSS background-color 基本語法如下：  background-color: 顏色名稱或色碼 ;  background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考： 網頁顏色代碼對照表 。    CSS  background-color 語法範例一、網頁背景  html{background-color: 顏色名稱或色碼 ;}   See the Pen  background-color-bg-example  by Tedutw ( @Tedutw ) on CodePen .       CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色  div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}   See the Pen  background-color-div-example  by Tedutw ( @Tedutw ) on CodePen .      同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱： 2. 背景圖樣設定 (background-image) 。              其他常用 CSS background 背景屬性說明連結  1. 背景顏色設定 (background-color)  2. 背景圖樣設定 (background-image)  3. 背景重複設定 (background-repeat)  4. 背景固定模式設定 (background-attachment)  5. 背景圖片位置設定 (background-position)            延伸閱讀：   前端工程師設定CSS








閱讀完整內容










前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素






-














圖片







         可拖曳的HTML5元素怎麼做?今天讓我來大顯身手!下次你就能出風頭啦!\   HTML5  Drag & Drop API-讓元素變得可拖曳   你可能不知道，過去在網頁裡面實現 Drag & Drop 是很麻煩的！一定要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但！現在各位有福啦！ HTML5  有直接的 Drag & Drop 機制，讓 前端工程師 可直接使用 drag and drop 的功能，讓使用者直接透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。   所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)：  <img draggable="true" />    HTML5  Drag & Drop API 的範例   See the Pen  HTML 5 Drag and Drop  by Tedutw ( @Tedutw ) on CodePen .      讓元素可拖放-HTML的部分   除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是說，我們本來是「拖不動」 它的。但在 HTML5 ，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分：   See the Pen  HTML 5 Drag and Drop  by Tedutw ( @Tedutw ) on CodePen .     draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。   See the Pen  HTML 5 Drag and Drop-2  by Tedutw ( @Tedutw ) on CodePen 








閱讀完整內容