p/omdbe7

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Pseudo-class 是一個 Keyword ，它被加到 Selector 的後面，來去指名說，某一個標籤它的狀態改變的時候，需要做什麼事情。

認真的F

@MajimeF

Mon, Nov 1, 2021 11:33 AM

網頁下面有很多。
以「:」開頭的那些詞。
就是加在 selector 後面的 pseudo-class。

認真的F

@MajimeF

Mon, Nov 1, 2021 11:35 AM

【:hover】
:hover 為滑鼠游標移上去時的效果。

預設情況：滑鼠游標移上去時。
這就是特定情況（狀態改變）。

認真的F

@MajimeF

Mon, Nov 1, 2021 11:37 AM

input[type="text"]:hover {
color: chartreuse;
}

滑鼠游標移上去的時候，文字變成亮綠色。
滑鼠游標移開，就變回去。

認真的F

@MajimeF

Mon, Nov 1, 2021 11:38 AM

textarea:hover {
background-color: red;
}

滑鼠游標移上去的時候，背景變成紅色。
滑鼠游標移開，就變回去。

認真的F

@MajimeF

Mon, Nov 1, 2021 11:39 AM

效果圖：

https://images.plurk.com/rqLm0WdzS0nEkXQhUKu8g.jpg

狀態改變指得就是像那樣…滑鼠游標有些動作時就算是。

認真的F

@MajimeF

Mon, Nov 1, 2021 2:27 PM

【:active】
:active 的意思是說
當你的滑鼠「按著」這個區塊的時候。
滑鼠放開，它就變回來了。

認真的F

@MajimeF

Mon, Nov 1, 2021 2:35 PM

效果圖：

https://images.plurk.com/6nki1zoEv8iB6xmyfM9e1C.jpg

滑鼠按著 text 區塊時，為亮綠色。
滑鼠放開，變回原色。

認真的F

@MajimeF

Mon, Nov 1, 2021 2:36 PM

【:focus】
跟 active 類似，但效果會持續到滑鼠游標點到別地方。

認真的F

@MajimeF

Mon, Nov 1, 2021 2:37 PM

input[type="text"]:focus {
color: chartreuse;
}

點上去就生效，在點到下一個前，都會保持。
也就是滑鼠放開依舊會維持效果。
（:active 為滑鼠按住才生效，滑鼠放開即失效。）

認真的F

@MajimeF

Mon, Nov 1, 2021 2:38 PM

效果圖：

https://images.plurk.com/1sDNFVigWojfIiND2WipBh.jpg

點別的 text 才會跳過去。
也就是游標所在的 text 處。

認真的F

@MajimeF

Mon, Nov 1, 2021 3:43 PM

【nth-child】
代表第幾個孩子要套用樣式。

nth-child(2) 就是「第二個」child。

認真的F

@MajimeF

Mon, Nov 1, 2021 3:45 PM

其實這個老師只有丟一個示範然後說效果之後就帶過去了＠＠
只是自己操作之後結果不一樣我才去問清楚。

以及有 google 一下。
最初看到這個時想到的就是表格套色…果然啊！

不知道為什麼講解得這麼少。
甚至沒有說清楚 () 括號裡面的數字是什麼意思。

認真的F

@MajimeF

Mon, Nov 1, 2021 3:47 PM

tr:nth-child(2) {
color: red;
}

套用在之前的表格中。

@MajimeF - 2021/10/07（四） #線上課程 #學習進度 #進度紀錄 29/536 學習...

認真的F

@MajimeF

Mon, Nov 1, 2021 3:48 PM

結果發現跟我自己又練習的表格不一樣。

https://images.plurk.com/6LV9o09JjLL6ukc35IDlNa.jpg

因為老師也沒講數字的意思，我之前還以為是指2的倍數。

認真的F

@MajimeF

Mon, Nov 1, 2021 3:50 PM

沒想到會是同學（？）回答XD

https://images.plurk.com/6ldCukcprrQ1CGB6dXALjI.jpg

原來數字是代表第幾個孩子XDDD

認真的F

@MajimeF

Mon, Nov 1, 2021 3:51 PM

之前的表格呈現第二與第四行的原因…
是因為之前還有練習<thead>與<tbody>！！

我在打那個表格時沒有再加上去，所以只有一個「第二個」。

認真的F

@MajimeF

Mon, Nov 1, 2021 3:54 PM

說來我總覺得這個很常見吧XD
不是很多表格都會那樣奇數偶數套色用不同的方便閱讀嗎？

我總覺得這種能大範圍指定的工具都很方便。
一口氣處理相關的項目啊。

認真的F

@MajimeF

Mon, Nov 1, 2021 3:55 PM

CSS :nth-child() Selector

考驗英文能力的時刻（。

Specify a background color for every <p> element that is the second child of its parent:

p:nth-child(2) {
background: red;
}

總之就是第二個孩子XDD

認真的F

@MajimeF

Mon, Nov 1, 2021 3:56 PM

之前的<table>是這樣有<thead>的…

<thead>
<tr>
<th colspan="3">貓熊分佈</th>
</tr>

<tr>
<th>國家</th>
<th>年份</th>
<th>panda</th>
</tr>
</thead>

認真的F

@MajimeF

Mon, Nov 1, 2021 4:00 PM

後面其他都<tbody>。
所以那兩行紅色才會是「第二個孩子」。

parent 是<thead><tbody>。

認真的F

@MajimeF

Wed, Nov 3, 2021 2:12 AM

下一噗：

@MajimeF - 2021/11/02（二） #線上課程 #網頁開發 #學習進度 #進度紀錄 62/...