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

CSS（層疊樣式表）是一種功能強(qiáng)大的標(biāo)記語言，允許 Web 開發(fā)人員創(chuàng)建視覺效果驚人且響應(yīng)迅速的設(shè)計(jì)。

以我的愚見，CSS（尤其是與 JS 結(jié)合以實(shí)現(xiàn)響應(yīng)）可能是 Web 開發(fā)中最重要的部分。 

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

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

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

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

在本文中，我們將探索 15個(gè)鮮為人知的 CSS 技巧，它們將幫助您增強(qiáng)網(wǎng)頁設(shè)計(jì)的性能，并保持有趣性。

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

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

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

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

損壞的圖像會對您網(wǎng)站的美觀產(chǎn)生負(fù)面影響。 為了優(yōu)雅地處理它們，您可以使用 ::before 偽元素和 content 屬性來顯示替代消息或圖標(biāo)來代替損壞的圖像。

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

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

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

div:empty {
  display: none;
}

4.使用calc()進(jìn)行動態(tài)計(jì)算

calc() 函數(shù)使您能夠使用 CSS 中的不同單位執(zhí)行計(jì)算，例如百分比、像素和 em。 這在創(chuàng)建響應(yīng)式設(shè)計(jì)時(shí)特別有用。

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

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

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

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


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

6.使用*選擇器應(yīng)用全局樣式

* 選擇器是一個(gè)通配符選擇器，它以頁面上的所有元素為目標(biāo)。 通過使用此選擇器，您可以輕松地將全局樣式應(yīng)用到您的網(wǎng)站。

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

7. 設(shè)置第一個(gè)和最后一個(gè)子元素的樣式

您可以使用 :first-child 和 :last-child 偽類來定位和設(shè)置父元素的第一個(gè)和最后一個(gè)子元素的樣式。 這在設(shè)計(jì)列表或?qū)Ш讲藛螘r(shí)特別有用。

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


li:last-child {
  border: none;
}

8. 使用 currentColor 關(guān)鍵字來實(shí)現(xiàn)一致的顏色樣式

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

9. 使用 :focus-within 偽類來設(shè)置有焦點(diǎn)子元素的樣式

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

10.實(shí)現(xiàn)CSS變量，方便主題切換

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

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


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

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

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

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 的情況下創(chuàng)建滾動效果

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

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

13、實(shí)現(xiàn)::selection偽元素自定義文本選擇

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

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

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

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

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


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

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

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

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

總結(jié)

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