:has() 父層選取器從 Safari 於2022年開始支援後，其他瀏覽器現在也幾乎都支援該功能 有時希望「 符合該條件的class或 ID，它的父層能夠套用某css設定時 」，這就是一個很好用又強大的功能。 例如： HTML： <div class="text-title">     <h2>標題文字<h2>   </div> <div class="text-title">     <h3>標題文字<h3>  </div> CSS： .text-title:has(h3) { background-color: red;} 以上的語法意思為：當 text-title 的 class 底下若有 h3 時， text-title 的底色需要呈現紅色。 如果CSS是這樣： .text-title:has(h3, h2) { background-color: red;} 以上的語法意思為：當 text-title 的 class 底下若有 h3 或 h2 時， text-title 的底色需要呈現紅色。 那如果想要讓它的條件同時有 h3 和 h2，CSS就需要這樣寫： .text-title:has(h3):has(h2) { background-color: red;} 但要特別注意，這種寫法，上方的 HTML 則不會有反應，因為它的 text-title 底下並沒有同時有 h3 和 h2，需要變成以下的情況： <div class="text-title">     <h2>標題文字<h2>       <h3>標題文字<h3> </div> 再來就是如果只想要在 text-title 底下那層的 h3 有反應，就必須寫成： .text-title:has(> h3) { background-color: red;}

上次介紹了偽元素，這次就來介紹一下「偽選擇器」。這也是一個好用到爆的功能，是以「:」冒號為開頭的選擇器，和偽元素一樣，它必須附在 HTML 元素中。 :first-child --> 第一個xx :last-child --> 最後一個xx 以上這兩個比較常會用在列表式的元素裡，像是表格、項目符號、清單……這類的 :link --> 作用和 a[href] 相同 :visited --> 選取目前瀏覽器中已瀏覽過的連結元素 :hover --> 滑鼠移過去的連結元素 :active --> 選取被按下的連結元素 以上這四個大家應該都不陌生，就是和 a 超連結有關係的設定 再來介紹的是和表單相關的偽選擇器 :focus --> 選取目前焦點，包含連結、輸入和文字區域元素 :enabled --> 指選擇、點按、輸入文字或接受 focus 的元素 :disabled --> 指不能選擇、點按、輸入文字或不接受 focus 的元素，一般像是勾選框 Checkbox 或單選鈕 Radio :default --> 選取一個表單中的預設項目 :indeterminate --> 沒有被指定預設狀態的勾選框或單選鈕 :required --> 選取有 required 特徵的 input :optional --> 選取沒有 required 特徵的 input :read-only --> 選取特徵為 readonly 和 disabled 的元素 最後就是比較通用的偽選擇器 :root --> 選取 html :first-of-type --> 相同分類中的第一個項目 :nth-of-type(n) --> 相同分類中的第n個項目 :last-of-type --> 相同分類中的最後一個項目 :nth-child(n) --> 不管分類，選取第n個項目 :nth-last-child(n) --> 不管分類，選取倒數第n個項目 :nth-child(odd) --> 不管分類，選取奇數元素 :nth-child(even) --> 不管分類，選取偶數元素 :not(n) --> 否定選取器，除了有n的元素，其他都選取

在 css 中，常常會看到元素後方加入「::」雙冒號的東西，這種東西實際在 HTML 是看不到，對 css 來說，他們是「偽元素」，也就是透過 CSS 創造出來、附屬在 HTML 元素的元素。以前還沒接觸到偽元素時，總覺得要在現有的 HTML 裡加入某個條線、某個區塊很難，了解偽元素後，才發現它除了可以在 HTML 元素的後 after、前 before 加入外，還有其他各種不同條件的偽元素，真是好用到爆炸呀！ 但是一個網站用太多的 HTML ，在前台檢查時也很麻煩，因為部份的偽元素是不容易檢查到，必須要透過經驗判斷，並直接查看 CSS 編碼才會發現。 下面就列出一些比較常使用的偽元素： ::after --> 元素的後方 ::before --> 元素的前方 ::first-letter --> 文字元素的第一個文字(字母) ::first-line --> 文字元素的第一行 ::selection --> 文字反選後的效果，僅限文字顏色、背景、陰影這幾種效果

做前端處理最常會遇到的，就是文字字體、字體大小、文字顏色這三種。 一般來說字體只要業主沒有特別要求，就是直接使用通用字體：微軟正黑體（for windows）、儷黑體（for mac）、中黑體（for 手機和平板），有時業主會希望使用較特別的字體，像是宋體、楷體、圓體……這時我都會和客戶說明，Google Font 非常佛心，有提供免費的中文字體，但僅限思源字體系列，既然是免費的，就加減用吧，哪天 Google 不提供，我們再來考慮替代方案吧！ 套用字體後，依據網站的樣式風格調整好文字顏色，最重要的就是「大小」！在未設定的情況下，網站通常都是採用 16px 的大小，也就是編輯器中的 meidum 尺寸。 只是字體大小的單位不一定只能用 px，其他還有 pt、em、%，有做過國內無障礙網站的前端就很清楚，第一關機器人審查的基礎就是 字體大小不得有 px 的單位 ，一律都需要改用 em 或是 %。對於我這個長期使用 wordpress 製作網站的前端來說，光是把 px 改為 em 就吐了一地的血，這時就會邊改邊罵，明明我買的版是符合國外無障礙網站樣版，為什麼還有一大堆需要調整的？！爬文之後才知道，原來國內無障礙的規範比起國外更為嚴格，讓一片的前端工程師唉嚎不止（我也是其中一位） 在預設情況下，16px 也就是等同於 12pt、100%、1em，以此類推其他不同尺寸。 下方稍微把一些較常使用的尺寸列出來供大家參考 px pt % em size 10px 7.5pt 62.5% 0.625em x-small 11px 8pt 70% 0.7em 12px 9pt 75% 0.75em 13px 10pt 80% 0.8em small 14px 10.5pt 87.5% 0.875em 15px 11pt 95% 0.95em

網路上可以隨處搜尋到許多假文產生器（Lorem Ipsum Generator） 這裡我列出幾個較常使用的 https://www.lipsum.com/ https://loremipsum.io/ https://www.blindtextgenerator.com/lorem-ipsum 只是很可惜，這些假文產生器都沒有繁體中文的版本，但我個人是覺得用英文來排版，比中文的好看，哈~~ 如果真的想要中文假文，可以試試以下的網站 https://textgen.cqd.tw http://www.richyli.com/tool/loremipsum/ 裡面的文字真的是完全沒有任何義意，看得懂那還真的是異世界的人了

一般內容區塊會有三個基本元素：padding、border、margin 若是 box-sizing 的設定不同，對於 padding 與 border 的判斷也會不同 現在有一區塊設定值如下： width: 200px; height: 100px; border: 1px solid red; padding: 5px; 當（一）box-sizing: content-box; 預設值 時 結果會出現一區塊為 寬 200px+1px+1px+5px+5px=212px 高 100px+1px+1px+5px+5px=112px 雖然區塊變大，但內容顯示的區塊仍是維持寬 200px、高 100px，多出來的就是 padding 和 border 當（二）box-sizing: padding-box; 時 結果會出現一區塊為 寬 200px+1px+1px=202px 高 100px+1px+1px=102px 區塊只有增加邊框的部份，padding沒有向外擴大，但卻會是向內，也因此內容顯示的區塊變成了 寬 200px-5px-5px=190px 高 100px-5px-5px=90px 當（三）box-sizing: border-box; 時 結果會出現一區塊為 寬 200px 高 100px 整個區塊的大小不變，但 padding 和 border 的值都往內，相對的內容顯示的區塊也因此被壓縮成 寬 200px-1px-1px-5px-5px=188px 高 100px-1px-1px-5px-5px=88px 結論：如果想要確保不管 padding 及 border 的厚度是多少，區塊都能保持不變的尺寸，使用第三個方式是最好的。不要忘記在設定時，也要加上 -moz-box-sizing 和 -webkit-box-sizing 的設定喔

最近剛好在研究 CSS 動畫效果，有時網頁只是需要一個簡單動態效果，總不能花大錢製作影片吧？ 後來發現可以利用簡單的 SVG 及一些 CSS 手法，就可以讓圖片動起來 只能說…高手真的是很強！看完介紹影片後，才覺得自己好弱呀~~ 泡泡動態效果 Youtube影片介紹： https://youtu.be/liW6bDLnuuk （這個作者真的蠻強的，除了泡泡影片也有其他跟 CSS、JavaScript 有關的動態效果影片，我已經入坑加入追蹤了） 它是利用 SVG 的動態語法特性，再加上 CSS 的配合，製作出會動的感覺 影片中提到的「泡泡 SVG」網站在這裡： https://lokesh-coder.github.io/blobs.app/?e=6&gw=6&se=32&c=d1d8e0&o=0 ，免費使用，真是佛心來的呀~~ 依據影片教學我自己也製作出類似的動態效果 【 泡泡動態效果看這裡 】 另外我自己又延伸出波浪的動態效果，不過在做完之後，才發現這個網站更佛心，它能自動產生動態效果，只要把語法放進 HTML 裡面就可以了，哈！ 「波浪 SVG」： https://svgwave.in/ 【 波浪動態效果看這裡 】 詳細的 SVG 動態語法，可以參考該站的說明： https://ithelp.ithome.com.tw/articles/10159283