: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(...

在 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 ...

一般內容區塊會有三個基本元素：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

 <meta name="viewport" content=" width=device-width , initial-scale=1 , shrink-to-fit=no , user-scalable=no " /> 以上這段會放在 Html 的 Head 區塊中，以下大略說明其用意： width=device-width ==> Viewport 的寬度為 Screen 的寬度 initial-scale=1 ==> 固定畫面比例為1 user-scalable=no ==> 避免畫面被放大或縮小 shrink-to-fit=no ==> 額外解決 iOS9 無法辨認 initial-scale 的新屬性

有時只是想要一個小小的淡入淡出動畫效果，可以使用以下的語法 -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;  可以加在 a 和 a:hover 兩個地方，那麼在滑入和滑出時都會有效果 不要問我為什麼要短短的一個淡入淡出動畫，就要寫這麼多行，其實只有一行啦！就是最後一行，另外四行有在玩 CSS 的應該都知道那是什麼東東吧？

以前我切版最愛用 Float ，但常常在一些區塊會無法彈性伸縮，現在在了解完 Flex 屬性後，發現 CSS 的世界真是廣大呀！哈~~~ Flex 屬性要套用的第一點，要記得它分為「外框元件」和「內元件」，感覺就像是 table 和 td 的關係，兩者缺一不可。 第一步要做的就是，將外框元件設定 display: flex; 沒有做這個設定，後續的設定都白搭。 因為這裡會有很多不同的情況，所以我先大略設定一個情況：一組外框元件600px寬度、和三個內元件A、B、C 接下來就是針對「外框元件」的相關設定： flex-direction : row（橫式左往右） | row-reverse（橫式右往左） | column（直式上往下） | column-reverse（直式下往上） flex-wrap : nowrap（超出範圍換行） | wrap（超出範圍不換行） | wrap-reverse（超出範圍換行時反轉） justify-content (水平對齊): flex-start（靠左） | flex-end（靠右） | center（置中） | space-between（左右均分，但內容寬度不變） | space-around（左右均分、內容寬度不變，但最左和最右有間距） align-items （垂直對齊): flex-start（靠上） | flex-end（靠下） | center（置中） | baseline（第一行文字的底部對齊） | stretch（上下均分置中，區塊會撐開) align-content （垂直對齊多行版，但需要先設定 flex-wrap: wrap 才會有用）: flex-start（靠上) | flex-end（靠下） | center（置中） | space-between（上下均分置中，區塊不會撐開） | space-around（上下均分置中，區塊不會撐開、但最上和最下會有間距） | stretch（上下均分置中，區塊會撐開） 「內元件」的相關設定： flex-grow （剩餘空間給元件的伸展性）: 0（預設值，都不伸展） | 1（剩餘空間分為1份做伸展），如果有兩個元件皆設定 flex-grow:1，代表剩餘空間分為2份做伸展，未設定的元件就不列入伸展 例如： 外空間為1000px，裡面包著A、B、C三個區塊，每個區塊寬...

這兩個偽元素一般來說在 HTML 程式裡面並不會看到，但在前台檢查時，卻可以透過 CSS 加上去，讓 DOM 增加更多不同的樣式。 特別注意： CSS 裡一定要寫一行：「 content: ' '; 」至於裡面要不要放文字，可以依設計來決定 這裡可以加的只能是一般文字和符號，不接受 <br> 這類的 HTML 語法 文字的樣式和父元素的相同，想要有不同的樣式，就需要再另外寫語法來指定 其他使用方式，可以搜尋Amos的「金魚都能懂的CSS選取器」一書，裡面會有更詳細的使用教學 【HTML】 <div class="events">      <a href="#">活動說明文字兼活動簡述文字</a> </div> 【CSS】 .events a {      font-size: 14px;     color: #333333;     display: block;     border-left: 3px solid #689c85;     padding-left: 0.5rem; }  【示意圖】 大概出現的樣式就是像下面的圖，左邊會有一條綠色線段 如果加上偽元素的 CSS 語法後： .events a:before {     content: '【特別】';     color:#ff0000;     font-weight:bold; } 在每個 a 的前面都會加上紅色、粗體的文字 前台檢查 HTML 語法時，也可以看到 a 底下出現了 ::before 的偽元素 如果用的是 ::after ，那麼文字就會出現在最後 偽元素的基本使用就介紹到這裡，下次有機會再介紹如何利用這兩個偽元素來增加更多變的樣式。

【HTML】  <div class="textzoom-line">     <dd>左側文字1</dd>     <em></em>     <dt>說明文字1</dt> </div> <div class="textzoom-line">     <dd>標題2</dd>     <em></em>     <dt>標題說明文字2</dt> </div> <div class="textzoom-line">     <dd>標題3</dd>     <em></em>     <dt>不曉得要打什麼就隨便啦</dt> </div> <div class="textzoom-line">     <dd>最後一行的標題文字4</dd>     <em></em>     <dt>說明</dt> </div> 【CSS語法】 .textzoom-line { display: flex;} .textzoom-line dd, .textzoom-line em, .textzoom-line dt {flex-shrink: 0;} .textzoom-line dd { padding-right: 1em;} .textzoom-line em { border-bottom: 1px dotted #000000; height: 0.9em; flex: 2;} .textzoom-line dt { padding-left: 1em; text-align: right;} 【說明】 就是把左文字、中間連接線、右文字用一個 te...

利用這個語法， 可以輕鬆在文字的下方（或右方）增加一個有質感的箭頭 【HTML 語法】   <p>Arrow Btn <strong class="arrowsBox"></strong></p> 【CSS】 .arrowsBox::before {      content: '';       border-bottom: 1px solid #f78a74; /* 下方一條線 */      border-right: 1px solid #f78a74; /* 右方一條線 */      -webkit-transform: skewX(45deg);       -ms-transform: skewX(45deg);       transform: skewX(45deg); /* 將該區塊傾斜 */      width: 50px;       height: 7px;       display: inline-block;  } 【說明】 當區塊未設定傾斜時呈現的樣式 而當區塊設定傾斜後，就可以明顯看到它變成箭頭的樣式了

【HTML】 <table clas="table-space"> <tr> <td>文字較少</td> <td>這一行的文字較多</td> <td>文字較少</td> </tr> </table> 【示意圖】 設定前 設定後 【CSS語法】 table.table-space { table-layout:fixed;word-break:break-all;} 一般來說，表格內的 td 會隨著內容自動拉出對等的寬度，只有一張表還沒什麼感覺，如果同時有很多張表排列下來，每個表格的欄位寬度都不同，會造成視覺上的不適，這時就可以加上語法來讓每個欄位寬度都是均分的。 不過要特別注意，表格的寬度要設定為 100%，不然感覺不出效果。

【HTML】  <section>   <h2>flex-direction: row</h2>   <div class="flex-container">     <div class="flex-item f1">內容 A</div>     <div class="flex-item f2">內容 B</div>     <div class="flex-item f3">內容 C</div>     <div class="flex-item f4">內容 D</div>     <div class="flex-item f1">內容 AA</div>     <div class="flex-item f2">內容 BB</div>     <div class="flex-item f3">內容 CC</div>     <div class="flex-item f4">內容 DD</div>     <div class="flex-item f1">內容 AAA</div>     <div class="flex-item f2">內容 BBB</div>     <div class="flex-item f3">內容 CCC</div>     <div class="flex-item f4">內容 DDD</div>     <div class="flex-item f1">內容 AAAA</div>     <div class="flex-item f2">內容...

原本在我自己的blog中有加入這個效果，現在改版就不再使用 可以看一下最下方的示意圖 【HTML】 <div>     <p><strong>文字</strong></p> </div>  【CSS語法】 div p strong { background-image: linear-gradient(90deg, #dbc477 0%, #dbc477 50%, rgba(219, 196, 119, 1) 50%, rgba(219, 196, 119, 1) 100%);     background-size: 200% 0.5em;     background-position: 100% bottom;     background-repeat: no-repeat;} 【說明】 這裡主要是在文字底下加入背景色，並透過「透明底色」+「有顏色底色」的漸層設定，來達到像是底線色塊的效果，就像是用螢光筆畫重點線的感覺。 顏色的色碼就請自行更換，另外想要修改底線的高度和大小，可以從 background-position 和 background-size 這兩個地方下手。 【示意圖】

 參考網站 https://www.itread01.com/p/641761.html

【CSS】  a {pointer-events:none;} 【說明】 此設定會讓全站的超連結 a 都無法點選，不論連結路徑有沒有設定、或是設定 # 只是單純讓連結功能失效，所以 HTML 中仍是可以查看到該超連結的連結路徑，Google 爬蟲仍是可以抓得到喔！ 另外因為連結功能失效，滑鼠移到該超連結就不會顯示手指頭的樣式，如果想要讓滑鼠也變樣式，可以加上 cursor:default; 這個語法，或是指定其他滑鼠游標樣式 滑鼠游標樣式可以參考該文章： http://www.flycan.com/article/css/css-cursor-209.html

 影片設定 object-fit: cover 效果同背景圖的 cover 一樣

 [html] <article> <div>區塊-1</div> <div>區塊-2</div> <div>區塊-3</div> </article> [css] article { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } article>div{ padding: 20px; } article>div:nth-of-type(1) { background: #DED561; } article>div:nth-of-type(2) { background: #DC3714; } article div:nth-of-type(3) { background: #5EDCDF; } article>div:nth-of-type(1){-webkit-order: 2;} article>div:nth-of-type(2){-webkit-order: 1;} article>div:nth-of-type(3){-webkit-order: 3;} article>div:nth-of-type(1){order: 2;} article>div:nth-of-type(2){order: 1;} article>div:nth-of-type(3){order: 3;}

 參考頁面 http://www.flycan.com/article/css/css-cursor-209.html