CSS（層疊樣式表）是網頁設計中重要的組成部分，但是它也有很多不常見的詞匯，這篇文章將為你介紹這些詞匯。

:root {
--main-color: red;
}

:root 選擇器用于選擇文檔樹的根元素。在此示例中，我們在根元素中設置了一個名為“--main-color”的變量，該變量可以在整個文檔中使用。

*:not(:last-child) {
margin-right: 10px;  
}

:not() 偽類選取除括號中元素之外的所有元素。在此示例中，我們選擇了除了最后一個子元素之外的所有元素。

.element::after {
content: "";
display: block;
clear: both;
}

::after 偽元素表示選中元素的 “after” 部分。在此示例中，我們使用“::after”為選中元素添加了一個空的塊級元素，用于清除浮動元素的影響。

:focus-visible {
outline: 2px solid blue;
}

:focus-visible 偽類表示元素在獲得焦點時呈現可見狀態。在此示例中，我們為元素添加了一個2px的藍色描邊，只有在使用鍵盤或類似設備進行導航時，該描邊才會顯示。

@supports (display: flex) {
.container {
display: flex;
}
}

@supports 規則允許在使用瀏覽器支持特定功能的情況下使用某些CSS樣式。在此示例中，我們檢查瀏覽器是否支持 flex 布局，如果支持，則為具有類名“container”的元素添加 display:flex 樣式。

這些不常用的CSS詞匯可能不常見，但在特定情況下非常有用。好好利用這些詞匯，可以幫助你創建更有效和高效的CSS樣式！