CSS 中「兄弟元素」的應用與痛點 在網頁切版與動畫設計中，我們經常遇到需要根據「元素是第幾個」或「總共有幾個元素」來改變樣式的情境。例如： 交錯動畫 (Staggered Animation)： 讓列表中的項目一個接一個出現，而不是同時出現。 動態寬度： 根據容器內有多少個項目，自動計算每個項目的寬度。 階梯狀視覺： 依序改變背景色深淺或位置偏移。 在過去，要純用 CSS 達成這些效果非常繁瑣。我們通常只能依賴 :nth-child() 寫死一堆規則（例如寫 50 行 CSS 來對應 50 個項目），或是使用 SCSS 的迴圈在編譯時產生代碼。更靈活的做法則是依賴 JavaScript 去計算並動態賦予 CSS 變數（如 --index , --total ）。因此原生的 CSS 解決方案因此備受期待。 此圖片由AI生成 sibling-index() 與 sibling-count() sibling-index()返回該元素在兄弟節點中的 索引值 （通常從 1 開始計算，具體依實作而定）。它相當於 JavaScript 中遍歷 DOM 得到的 index。 sibling-count()返回該元素的父容器下，包含自己在內共有多少個 兄弟節點總數 。它相當於 JavaScript 中的 parentNode.children.length 。 基本語法範例： .item { /* 讓每個項目的動畫延遲時間隨索引增加 */ animation-delay: calc(sibling-index() * 0.1s); /* 根據總數量自動計算寬度 */ width: calc(100% / sibling-count()); } CodePen 實例解析 接下來我們透過 CodePen 實作一些簡單的範例。 See the Pen sibling-index(), sibling-count() by cj ( @cjzopen ) on CodePen . 自動計數與視覺堆疊 在範例中，透過 sibling-index() ，我們可以為每一個卡片或列表項目設定獨立的 Z 軸層級或顏色變化，而...

大家都知道，AI 為了迎合使用者、不懂裝懂時，會產生 AI 幻覺(hallucination)，除了文字之外，有時也會出現超連結的幻覺。若只是 AI 幻想的連結那還好，但若是把社交工程的連結拿來給使用者點擊，嚴重性可大可小。 本圖片由AI生成 實際經驗 前幾天在AI平台詢問如何報廢機車領取補助、如何得知該報廢機車的出廠年份，AI 給出的答案都非常正確，但其中一個連結卻是連到釣魚網站。 雖然我以前就知道 AI 有時候會自創連結，但沒想到這次自創的連結剛好具有攻擊性，不可不注意。 說到這裡，有些人的網站也遇到一些來自AI平台的404流量。 如何處理因AI幻覺而進站的404流量？ 絕對不要為了從以前就不存在的頁面設定301轉址。 網站的404頁面要有引導能力。 任意設定301轉址的話會造成各方面的困惑（不論是爬蟲還是使用者），最差的做法就是將404全部跳轉到首頁，這對 SEO 來說是禁忌。 404並沒有什麼不好，它也是好不容易得來的流量；反過來看，你可以把404頁面當成landing page，好好地設計它，讓它成為有效的流量。 舉例來說，404頁面可以導入AI技術，從網址來判斷使用者的意圖，再推薦使用者一些他可能會感興趣的頁面。 為何網站的404幻覺流量會很多？ 有一說是網頁架構太差，加上網頁的網址結構太爛。例如明明存在產品導覽頁面，但產品網址卻不在產品導覽頁面下面。 另外也有一說是缺乏標準網址（canonical）、原本存在的404連結就很多。就看你信不信。 總而言之，在AI平台（尤其是 ChatGPT）點擊超連結時，就跟打開 email 一樣，稍微留意一下網域是否錯的太離譜。