: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;}

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

這兩個偽元素一般來說在 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 語法】   <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;  } 【說明】 當區塊未設定傾斜時呈現的樣式 而當區塊設定傾斜後，就可以明顯看到它變成箭頭的樣式了