為了充分利用本文，我建議打開一個 CodePen 或 CodeSandbox 選項卡，這樣您就可以在閱讀本文時使用代碼。

CSS（層疊樣式表）是一種功能強大的標記語言，允許 Web 開發人員創建視覺效果驚人且響應迅速的設計。

以我的愚見，CSS（尤其是與 JS 結合以實現響應）可能是 Web 開發中最重要的部分。 

一旦我們達到了特定的性能閾值，普通用戶就會對您網站的美學更感興趣，而不是它的相對加載時間。 CSS 也變得非常容易通過組件庫（Bootstrap、Material 等）從您的工作流程中抽象出來。

一些開發人員也可能選擇大量使用 javascript 的樣式管理方法（即動態添加/減去類），但這會創建更復雜的代碼庫并可能使應用程序更慢。

今天我們將探索一些鮮為人知的 CSS 屬性，這樣您就可以在不犧牲性能的情況下為您的應用程序增添光彩，并將您的前端技能提升到一個新的水平。

雖然有許多廣為人知的 CSS 屬性和技術，但還有一些鮮為人知但非常有用的提示和技巧可以將您的網頁設計提升到新的高度。 

在本文中，我們將探索 15個鮮為人知的 CSS 技巧，它們將幫助您增強網頁設計的性能，并保持有趣性。

1. 使用 :not() 偽類來簡化你的 CSS

:not() 偽類允許您將樣式應用于所有不匹配指定選擇器的元素。 這是簡化 CSS 并避免手動列出元素或應用類來排除某些元素的好方法。

/* Apply styles to all elements except paragraph and anchor tags */
:not(p, a) {
  /* Your styles here */
}

2. 使用 ::before 偽元素為損壞的圖像添加樣式

損壞的圖像會對您網站的美觀產生負面影響。 為了優雅地處理它們，您可以使用 ::before 偽元素和 content 屬性來顯示替代消息或圖標來代替損壞的圖像。

img::before {
  content: "Image not available";
  display: block;
  text-align: center;
  /* Additional styles here */
}

3.使用:empty偽類隱藏空元素

有時，您可能希望隱藏空元素以保持干凈的布局。 您可以使用 :empty 偽類來隱藏這些元素，而不需要 JavaScript。

div:empty {
  display: none;
}

4.使用calc()進行動態計算

calc() 函數使您能夠使用 CSS 中的不同單位執行計算，例如百分比、像素和 em。 這在創建響應式設計時特別有用。

.container {
  width: calc(100% - 20px);
}

5. 使用 :hover 偽類和過渡屬性為元素設置動畫

您可以使用 :hover 偽類結合 transition 屬性創建簡單的動畫。 這是一種無需依賴 JavaScript 或外部庫即可為您的設計添加交互性的輕量級方法。

.button {
  transition: background-color 0.3s ease-in-out;
}


.button:hover {
  background-color: #f00;
}

6.使用*選擇器應用全局樣式

* 選擇器是一個通配符選擇器，它以頁面上的所有元素為目標。 通過使用此選擇器，您可以輕松地將全局樣式應用到您的網站。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

7. 設置第一個和最后一個子元素的樣式

您可以使用 :first-child 和 :last-child 偽類來定位和設置父元素的第一個和最后一個子元素的樣式。 這在設計列表或導航菜單時特別有用。

li:first-child {
  font-weight: bold;
}


li:last-child {
  border: none;
}

8. 使用 currentColor 關鍵字來實現一致的顏色樣式

.button {
  color: #f00;
  border: 1px solid currentColor;
}

9. 使用 :focus-within 偽類來設置有焦點子元素的樣式

.form-group:focus-within {
  border: 1px solid #f00;
}

10.實現CSS變量，方便主題切換

CSS 變量，也稱為自定義屬性，允許您在整個樣式表中存儲和重用值。 這在創建主題或需要一次更改多個值時特別有用。

:root {
  --primary-color: #f00;
}


.button {
  background-color: var(--primary-color);
}

11. 使用 :checked 偽類樣式復選框和單選輸入

由于瀏覽器不一致，自定義復選框和無線電輸入的外觀可能具有挑戰性。 :checked 偽類允許您在選擇這些元素時設置它們的樣式，從而提供一致且視覺上吸引人的用戶體驗。

input[type="checkbox"]:checked + label {
  background-color: #f00;
  /* Additional styles here */
}


input[type="radio"]:checked + label {
  border: 2px solid #f00;
  /* Additional styles here */
}

12. 使用 :target 偽類在沒有 JavaScript 的情況下創建滾動效果

:target 偽類允許您在元素是當前 URL 片段標識符（“#”之后的部分）的目標時設置元素樣式。 這可用于創建滾動效果或突出顯示特定部分，而無需依賴 JavaScript。

section:target {
  background-color: #f0f;
  /* Additional styles here */
}

13、實現::selection偽元素自定義文本選擇

::selection 偽元素允許您設置元素中所選文本外觀的樣式。 這可用于通過將文本選擇顏色與您網站的配色方案相匹配來創建更具凝聚力的設計。

::selection {
  background-color: #f00;
  color: #fff;
}

14. 利用 :required 和 :optional 偽類來設置表單輸入的樣式

:required 和 :optional 偽類使您能夠根據它們被標記為必需還是可選來設置表單輸入的樣式。 這有助于向用戶提供有關特定表單字段重要性的視覺提示。

input:required {
  border: 2px solid #f00;
}


input:optional {
  border: 1px solid #ccc;
}

15. 使用 ::placeholder 偽元素來設置輸入占位符的樣式

::placeholder 偽元素允許您在輸入元素中設置占位符文本的樣式。 這可用于創建視覺上一致且有吸引力的表單，同時為用戶提供有用的指導。

input::placeholder {
  color: #f00;
  font-style: italic;
}

總結

CSS就像任何與代碼相關的東西一樣，需要我們熟能生巧！ 因此，我們可以在 CodePen/CodeSandbox 中測試其中一些屬性，并增加對這些鮮為人知的屬性的熟悉程度，以便您可以將它們添加到您的下一個應用程序中。