iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
2
Modern Web

前端新手村系列 第 13

前端新手村 CSS 的 簡單 Selector (下篇)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

css 的 簡單 Selector (下篇)

The UI element states pseudo-classes

可以 enable / disable 切換的UI元素。
切換時可用這兩種元素選取

  • :enabled
  • :disabled

<input type="radio"|"checkbox"> 的 element 可以套用上,點擊可以切換成能套用 :checked 和不能套用 :checked 的。

  • :checked

Structural pseudo-classes

結構化虛擬類,允許用 DOM 樹結構關係進行選取。
以1起始計數

  • :root document 的根節點

n 的小小補習班

n 可以是 oddeven 單數、偶數。
如果覺得很難記,教你一個好記的方式

odd 幾個字母?3是奇數還是偶數?
even 幾個字母?4是奇數還是偶數?

所以 odd 是奇數,even 是偶數

n也可以是 ±Zn±Z±Zn (Z是整數) [2]

無差別計數。
像是家裡的第幾個小孩

  • :nth-child(n) 正數第 n 個同層
  • :nth-last-child(n) 倒數最後一個同層
  • :first-child 老大
  • :last-child 老么
  • :only-child 獨子

同類計數
像是家裡的第幾個男孩或女孩

  • :nth-of-type(n) 正數第 n 個同層同類
  • :nth-last-of-type(n) 倒數第 n 個同層同類
  • :first-of-type 長男或長女
  • :last-of-type 么男或么女
  • :only-of-type 生一個男的或一個女的

最後一個

  • :empty 沒有孩子,沒有資料

有些特別的

<div></div> 有
<div>1</div> 無
<input type="text" value="chris"> 有

The negation pseudo-class

  • :not(selector) 改選擇沒被 selector 到的那些

常見好案例

案例 1: CSS 取代 onclick

被選到的就變紅字

input:checked + span {
 color: red;
}
 <input type="radio" name="X"><span>1X</span>
 <input type="radio" name="X"><span>2X</span>
 <input type="radio" name="X"><span>3X</span>
 <input type="radio" name="X"><span>4X</span>
 <input type="radio" name="X"><span>5X</span>

案例 2: 磚型排版

要做這個排版

可以先觀察,重複性: 每九個就重複一次,排列方式。
只要先做一般的排版,並且選取到紅色的部份,就等於做完了。

n = 9n+6

原始碼長這樣
margin-left: 50px; 解除註解就可以看到成功的案例囉

.box {
 padding-bottom: 50px;
 width: 100px;
 outline: 1px solid black;
 display: inline-block;
}

.box:nth-child(9n+6) {
/*  margin-left: 50px; */
 background-color: #f00;
}

.container {
 width: 500px;
 font-size: 0;
}
<div class="container">
 <div class="box"></div>
 <div class="box"></div>
 <!--  省略掉很多 box  -->
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

參考資料

[1]: Selectors Level 3, 6.6. Pseudo-classes - w3.org
[2]: 整數 - wiki


上一篇
前端新手村 CSS 的 簡單 Selector (中篇)
下一篇
前端新手村 CSS Selector 的 Combinators
系列文
前端新手村30

尚未有邦友留言

立即登入留言