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

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

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

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

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

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

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

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

1. 使用 :not() 偽類(lèi)來(lái)簡(jiǎn)化你的 CSS

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

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

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

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

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

3.使用:empty偽類(lèi)隱藏空元素

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

div:empty {
  display: none;
}

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

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

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

5. 使用 :hover 偽類(lèi)和過(guò)渡屬性為元素設(shè)置動(dòng)畫(huà)

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

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


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

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

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

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

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

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

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


li:last-child {
  border: none;
}

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

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

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

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

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

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

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


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

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

由于瀏覽器不一致，自定義復(fù)選框和無(wú)線(xiàn)電輸入的外觀(guān)可能具有挑戰(zhàn)性。 :checked 偽類(lèi)允許您在選擇這些元素時(shí)設(shè)置它們的樣式，從而提供一致且視覺(jué)上吸引人的用戶(hù)體驗(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 偽類(lèi)在沒(méi)有 JavaScript 的情況下創(chuàng)建滾動(dòng)效果

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

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

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

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

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

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

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

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


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

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

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

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

總結(jié)

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