聯成電腦技術論壇

 找回密碼
 註冊
搜索
查看: 300|回復: 2

網頁設計教學:一次搞懂CSS3選擇器

[複製鏈接]
發表於 2019-1-29 09:40:23 | 顯示全部樓層 |閱讀模式
文、菜鳥編



原文網址




CSS除了id,class選擇器外,你還知道有哪些?其實在CSS3的規範之下,還有許多相當好用的選擇器可提升開發靈活性。如果你還不是很了解,就以Excel來說吧,假使要你在一堆資料中,找出儲存格中內容中有包含「網頁」的字串,而且結尾必須是「好簡單」。你能立馬知道有哪些函數可以幫助你完成嗎?我很常說,工具它只是工具,還是幫手,就單看你怎麼使用。條條道路通羅馬,在完成結果的過程中,你是要走捷徑還是繞徑,就會影響你的效率甚大。

而CSS3選擇器的組合使用,就看你對它知道多少。這麼多的方式,不可能每一樣都經常會使用到,但至少當遇到問題時要能知道方向在哪裡。好比說,你會在技術討論區看過一堆新手的發問,明明只要一個站內搜尋就可以解決,偏偏還要發問讓人損!這真的不能怪罪他們,因為他們連搜尋的關鍵字要打什麼都不知道,不是嗎?所以多接觸是好事,有方向才會知道怎麼找答案。這次就來介紹幾個在CSS中好用的選擇器。




1. 通用選擇器「*」:

星號標誌意旨所有元素,相信你在網路上經常看到下面的編碼,用來將margin與padding歸零。但如果可以,真的建議別用在生產環境的代碼中,因為可能會造成瀏覽器負擔,有時甚至可能是沒必要的編寫方式。

* {
  margin: 0;
  padding: 0;
}




2. 子選擇器:


既然是子選擇器,就一定會有父子關係,先來看以下下面的例子,在class=”demo”下的li都會套用到紅色字體的設定。


HTML

    <ul class="demo">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>


CSS

.demo li {
  color: rgb(217, 45, 45);
}



當我在其中一個li中再插入一個項目清單,可以看到顏色直接套用。




主要是因為當我們使用空格方式時,是會影響到「後代所有的元素」,當把空格改成「>」時,就只會影響到子元素層級,後來所插入的清單並非父子關係,所以就不會被直接套用。




3. 型態選擇器:


型態選擇器又稱標籤選擇器,主要套用在HTML標籤上,如下面的例子,直接就可將樣式套用在ul與li標籤上。


CSS

ul {
  font-size: 0;
  color: rgb(255, 255, 255);
}

li {
  display: inline-block;
  width: 5rem;
  height: 3.125rem;
  background: rgb(95, 149, 205);
  font-size: 1.125rem;
  line-height: 3.125rem;
  text-align: center;
  border: 1px solid #fff;
}


結果:




4. 屬性選擇器:


作用是針對標籤中有特定屬內容的會套用CSS設定,在HTML5中新增的data-* attribute屬性,就很適合搭配使用,總共6種方式,如果有接觸過正則表達式的人,應該就不陌生。

以剛才的範例,在li中加入了data屬性:

    <ul class="demo">
      <li data-index="1" data-item="dog">dog</li>
      <li data-index="2" data-item="catsample">cat</li>
      <li data-index="3" data-item="bearsample">bear</li>
      <li data-index="1" data-item="frog">frog</li>
      <li data-item="lion">lion</li>
    </ul>



[ attribute ]
將CSS套用在標籤中有「data-index」屬性的li 元素

.demo li[data-index] {
  color: rgb(217, 45, 45);
}





[ attribute = value ]
將CSS套用在屬性「data-index = ‘1’」的li 元素

.demo li[data-index='1'] {
  color: rgb(217, 45, 45);
}





[ attribute ~= value ]
將CSS套用在屬性data-item 中有包含”sample”的所有元素

.demo li[data-item~='sample'] {
  color: rgb(217, 45, 45);
}





[ attribute ^= value ]
將CSS套用在屬性data-item 中以”d”開頭的所有元素

.demo li[data-item^='d'] {
  color: rgb(217, 45, 45);
}





[ attribute $= value ]
將CSS套用在屬性data-item 中以”g”結尾的所有元素

.demo li[data-item$='g'] {
  color: rgb(217, 45, 45);
}





[ attribute *= value ]
將CSS套用在屬性data-item 中有包含”o”的所有元素,你可能會覺得與[ attribute ~= value ]有點類似,使用「~」算是完全比對,也就是屬性中的值與完全等於你指定的字串,而「*」屬模糊比對,只要有包含即可。

.demo li[data-item*='o'] {
  color: rgb(217, 45, 45);
}




使用屬性選擇器,就可以一次將網頁中結尾是.jpeg的圖片做CSS設定,或是特定網頁連結的效果設定等等......。



5. 同層選擇器:


又分同層相鄰(+)與同層全體(~),以下面案例來說,在加上「+li」時,依照前面屬性選擇器來看,只要有data-index=’2’的元素會被套用,也就是cat的元素。但因使用了「同層相鄰」結果就是只有bear字體會變成紅色。

.demo li[data-index='2'] + li {
  color: rgb(217, 45, 45);
}





相同的,當使用了同層全體時,在cat後方相同層級的li就都會套用。

.demo li[data-index='2'] ~ li {
  color: rgb(217, 45, 45);
}




應該不難觀察到,只會套用在指定元素之後的同層元素,之前的同層元素則會保持原樣。



6. 偽類&偽元素:


很多人可能會分不清楚這兩者的差別,這邊用簡單的方式來說,偽類可把它想成是狀態的設定,例如連結樣式的設定,滑鼠滑過、連結樣式、點擊後的連結樣式等等,而偽元素可以想成始選取元素的指定部分。例如大家最熟悉的「before」與「after」。由於W3C中這類的型態相當多,列舉幾個大家最常使用的。


偽類:
動態:link、:visited、:hover、:active、:focus
元素狀態:enabled、:disabled、:checked
結構:root、:nth-child、:nth-of-type、:nth-last-of-type、:first-child、:last-child、:first-of-type、:last-of-type、nly-child、nly-of-type、:empty
指定:not

偽元素:
:first-line、:first-letter、:before、:after


結構中的使用大同小異,主要都是用來挑選特定的元素,以這邊的案例來說,nth-child(1),就會選定「dog」的li元素,也等於「:first-child」。

.demo li:nth-child(1) {
  color: rgb(217, 45, 45);
}




相對的,「: last -child」、「nth-last-child(1)」相同,都是指向最後一個li元素。first-child與last-child不能指定,分別指向第一個與最後一個元素。而nth-child與nth-last-child必須要給予一個正整數的參數,以1為基數。下例就是指定倒數第二個元素。




搞懂這些選擇器,開發上就可以將樣是快速的套用到指定的位置上,不要將樣式表一層一層指定,不僅增加檔案大小,閱讀上也相當不便,如果你覺得這篇文章很實用,也別忘了分享給你的親友們,相信對他們一定很有幫助!

► 推薦課程:跨平台商業網站設計




延伸閱讀
聯成電腦菜鳥編網頁設計教學:一次就讓你搞懂Flexbox
聯成電腦菜鳥編網頁設計教學:一次讓你搞懂SASS
聯成電腦菜鳥編網頁設計教學:CSS置中的6個方法
聯成電腦菜鳥編網頁設計教學:推薦給前端設計的10個Chrome外掛
聯成電腦分享:學會網頁設計,讓你具備創業好能力



官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w



發表於 2019-2-13 19:03:00 | 顯示全部樓層
這篇文章很有用,已收藏
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2019-2-14 09:19:18 | 顯示全部樓層
0994022306 發表於 2019-2-13 19:03
這篇文章很有用,已收藏

謝謝您
回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



小黑屋|Archiver|手機版|聯成電腦技術論壇  

GMT+8, 2019-11-14 11:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表