🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
一、忘了最基礎的東西
前端開發的核心構建在三大基石技術上：HTML、CSS和JavaScript。回想起多年前，前端開發者常被戲稱為“切圖仔”，但就是這樣的角色，透過精湛的CSS技巧，能夠實現各種複雜的互動和特效，展現出前所未有的網頁魔法。這是那些專注於服務端開發的工程師所難以企及的領域。因此，前端工程師這一職業逐漸嶄露頭角，早期的培訓班甚至設立了專門的課程來傳授這些技能。然而，隨著時間的推移，UI元件庫和框架變得越來越普及，HTML和JavaScript的重要性依舊被人們所認可，但CSS技能卻逐漸被邊緣化，甚至有所忽視。在一次程式碼走查中，發現一個擁有三四年前端開發經驗的同事，連CSS最基本的型別選擇器都掌握不熟練。這一現象令人感到憂慮。
二、令人無語的程式碼
在一次對 useState 的使用場景進行治理的過程中。發現了
import React, { useState } from 'react';
import { Input } from 'antd';
import type { FC } from 'react';
import styles from './index.less';
const Test: FC = () => {
const [isFocus, setIsFocus] = useState(false);
return (
<Input
className={isFocus ? styles['input-focus'] : styles.input}
onFocus={() => {
setIsFocus(true);
}}
onBlur={() => {
setIsFocus(false);
}}
/>
);
};
export default Test;
.input-focus{
background: #f2f3f;
}
三、詢問緣由
這段程式碼的目的是根據輸入框的焦點狀態（聚焦或失去焦點）來改變其樣式，邏輯上沒有問題。
我找到編寫這段程式碼的同事詢問：“為什麼需要定義一個isFocus狀態呢？”
他看了程式碼良久，有些疑惑地解釋說：“這是為了追蹤輸入框的聚焦狀態，從而在聚焦時改變背景色。”
“這個狀態還有其他用途嗎？”我追問。
“沒有，就這個作用。有問題嗎？”他回答。
我繼續探詢：“不使用isFocus狀態，我們還能達到同樣的效果嗎？”
他思考了一會兒：“如果不新增類名來標識輸入框的聚焦狀態，我們怎麼區分呢？”
我提出了另一種方案：“我們能不能僅用CSS來實現這個效果？”
他遲疑了一下：“但是CSS怎麼能識別輸入框是否聚焦呢？”
我提醒他：“你有沒有試過使用偽類選擇器？”
“偽類？我通常只用類選擇器。”他回答。
我解釋道：“我們可以使用:focus偽類來實現這個效果。你可以先回去繼續你的工作。”
四、審查他另外的程式碼
我繼續審查了這位同事的其他程式碼，發現他對CSS的理解似乎並不深入。例如，為了實現列表的斑馬紋效果，理應直接使用:nth-child(odd)和:nth-child(even)選擇器，但他卻透過在遍歷過程中判斷索引是奇數還是偶數來分別新增不同的類選擇器實現這一效果。此外，他同時使用了float: left和position: absolute，這在佈局中是矛盾的組合。他還透過JavaScript動態新增類選擇器來改變輸入框提示文字的字型顏色，還一直重複定義color和font-size而不懂這些可以繼承。
我不確定這是否反映了他的態度問題或是能力問題，在現在只出不進，內部消化的環境下，我默默地記錄下這些，以便將來作為評估的參考。
五、關鍵是理解而不是記憶
也許會有人覺得我要求的太苛刻，也許這位同事只是忘記了有這幾個CSS選擇器。的確，CSS選擇器的種類眾多，達到60多種，可能會讓人難以記住每一個。然而，重點並不在於能否一一背誦每個選擇器，而在於理解它們各自的功能和使用場景。這樣，當面對特定的樣式需求時，我們可以輕鬆地查詢並應用最合適的選擇器來實現目標效果。
最基本的元素選擇器、類選擇器、和ID選擇器因其簡潔直觀而被頻繁使用。但是，深入探索那些不那麼顯眼的選擇器——如萬用字元選擇器、組合選擇器、屬性選擇器、偽類選擇器、和偽元素選擇器——同樣至關重要。這些選擇器賦予了我們更精細的控制權，使得我們能夠創造出更加複雜和細膩的視覺效果。
總之，我們不必強迫自己記住所有CSS選擇器。更為重要的是認識到CSS選擇器的多樣性和強大之處。這種認識使我們能夠在遇到具體的樣式挑戰時，知道如何尋找解決方案，從而更高效地運用CSS最佳化我們的程式碼。
為了真正理解這些選擇器，我們需要思考它們被設計出來的原因——它們是如何幫助我們更好地控制樣式，應對各種佈局和視覺挑戰的。這種深入的理解方式，遠比簡單的記憶更為重要和有效。
六、為啥需要偽類選擇器
偽類選擇器在CSS中的存在有著重要的意義和作用。它們提供了一種方式來選擇HTML文件中無法透過簡單選擇器（如元素選擇器、類選擇器或ID選擇器）直接選擇的元素。偽類選擇器的設計初衷和主要用途包括以下幾點：
1、表達元素的特定狀態
偽類選擇器允許開發者根據使用者與頁面的互動來改變元素的樣式，而不需要改變HTML程式碼。例如，:hover偽類可以用來改變滑鼠懸停在連結或按鈕上時的樣式，:focus偽類用於當元素獲得焦點時（比如輸入框被點選時），而:active偽類則用於元素被啟用（通常是被點選）的瞬間。這些都是基於使用者行為的動態變化，透過CSS直接實現，無需JavaScript介入，提高了網頁的互動性和使用者體驗。
2、選擇特定位置的元素
偽類選擇器還可以用來選擇處於特定位置的元素，例如第一個子元素、最後一個子元素或者是父元素的唯一子元素。這對於設計複雜的佈局和樣式非常有用，尤其是在處理列表、表格和導航選單時。例如，:first-child、:last-child、:nth-child()等偽類選擇器，它們提供了一種靈活的方式來選擇和樣式化這些特定位置的元素。
3、選擇特定屬性的元素
雖然屬性選擇器（如[attribute=value]）可以用來基於元素的屬性選擇元素，但某些偽類選擇器（如:checked）提供了更為簡便的方式來選擇具有特定屬性的元素。例如，:checked偽類選擇器可以選擇所有選中的核取方塊和單選按鈕，這對於建立自定義表單控制元件的樣式非常有用。
4、增強可訪問性
偽類選擇器還可以增強網頁的可訪問性。例如，:focus偽類可以用來為獲得焦點的元素定義明顯的樣式，這對於鍵盤導航使用者來說非常重要。透過提供視覺反饋，使用者可以更容易地識別當前互動的元素，從而提高網站的可訪問性。
5、無需額外的HTML標記
使用偽類選擇器，開發者可以在不增加額外HTML標記的情況下，實現複雜的樣式和佈局。這有助於保持HTML程式碼的簡潔和語義化，同時還可以減少頁面的大小和提高載入速度。
總之，偽類選擇器為CSS提供了強大的功能，使得開發者能夠以更細緻和動態的方式控制網頁的樣式。它們是現代網頁設計中不可或缺的工具，使得網頁能夠響應使用者的互動，同時保持程式碼的整潔和高效。
七、為啥需要偽元素選擇器
偽元素選擇器在CSS中的引入，為網頁設計和內容表現提供了更加豐富和靈活的手段。偽元素選擇器允許開發者訪問並樣式化一個元素的特定部分，或者在文件樹中虛擬地建立新的元素，而這些通常不能透過HTML直接實現。偽元素選擇器的存在有幾個重要的原因和用途：
1、訪問和樣式化文件的特定部分
偽元素選擇器使得開發者能夠訪問並樣式化元素的特定部分，比如第一行文字、第一個字母、或者元素之前和之後的內容。例如，::first-line 和 ::first-letter 偽元素分別允許開發者為元素的第一行文字和第一個字母設定特定的樣式。這在打造具有吸引力的排版和閱讀體驗時非常有用。
2、在不改變HTML結構的情況下新增內容
透過使用 ::before 和 ::after 偽元素，開發者可以在元素的內容之前或之後插入新的內容或裝飾，而不需要修改HTML程式碼。這種方法非常適合新增圖示、裝飾性元素或者是為元素新增特殊的字首或字尾，同時保持HTML的清晰和語義化。
3、建立視覺效果
偽元素選擇器也常被用於建立特殊的視覺效果，比如自定義的清除浮動方法（使用 ::after 清除浮動），或者是設計複雜的背景裝飾和形狀。這些都可以透過偽元素以及結合CSS的其他特性（如background、border、box-shadow等）來實現。
4、提高網頁效能
使用偽元素可以在不增加額外HTML元素的情況下實現複雜的設計，這有助於減少DOM的大小，從而提高網頁的效能。透過減少頁面載入時需要解析的HTML標籤數量，可以加快頁面的渲染速度。
5、保持HTML的語義化
透過使用偽元素來新增裝飾性內容或樣式，開發者可以避免在HTML中新增非語義化的標記。這有助於保持HTML文件的清晰和語義化，使得文件的結構更加明確，也更容易被搜尋引擎最佳化（SEO）和螢幕閱讀器理解。
總之，偽元素選擇器為CSS提供了強大的功能，使得開發者能夠以更細緻和動態的方式控制網頁的樣式和內容。它們是現代網頁設計中不可或缺的工具，允許開發者在不犧牲HTML語義化的前提下，實現複雜和創新的設計。
八、為啥需要屬性選擇器
屬性選擇器在CSS中的引入提供了一種強大的方式來根據元素的屬性及其值來選擇元素，從而應用特定的樣式。這種選擇器的存在和使用有幾個關鍵的原因和優勢：
1、精確選擇和樣式化元素
在複雜的網頁設計中，開發者可能需要對具有特定屬性或屬性值的元素應用樣式，而不是僅基於元素型別、類或ID。屬性選擇器使得這種精確選擇成為可能。例如，可以選擇所有設定了target="_blank"屬性的<a>標籤，併為它們應用特定的樣式，以提示使用者這些連結將在新視窗中開啟。
2、提高CSS規則的靈活性
屬性選擇器增加了CSS規則的靈活性，允許開發者基於元素的屬性和屬性值來建立複雜的選擇條件。這意味著開發者可以在不修改HTML結構的情況下，透過CSS實現更多的設計需求和響應式佈局。
3、增強樣式的可維護性
使用屬性選擇器，開發者可以避免在HTML中過度使用類或ID，從而簡化HTML結構並提高樣式的可維護性。當需要基於相同屬性的元素應用統一的樣式時，只需在CSS中定義一次相應的屬性選擇器規則，而不是在HTML中為每個元素重複新增類或ID。
4、促進更好的語義化和可訪問性
屬性選擇器可以用來增強文件的語義化和可訪問性。例如，透過選擇具有特定role屬性的元素併為它們應用樣式，開發者可以幫助提高網頁對於螢幕閱讀器等輔助技術的可訪問性。
5、實現條件樣式
在某些情況下，開發者可能希望僅在元素具有特定屬性或屬性值時才應用樣式。屬性選擇器使得這種條件樣式化成為可能，無需額外的類或ID，也無需使用JavaScript。這種方式非常適合實現基於特定資料屬性（data-*屬性）的樣式變化。
示例
假設我們想為所有含有特定屬性data-tooltip的元素新增一個工具提示樣式，我們可以使用如下CSS規則：
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before {
content: attr(data-tooltip);
/* 更多的樣式規則來定義工具提示的外觀 */
}
這個示例展示瞭如何僅透過CSS和HTML屬性來實現一個簡單的工具提示功能，無需修改HTML結構或使用JavaScript。
總之，屬性選擇器為CSS提供了更多的選擇和樣式化能力，增加了樣式表的靈活性和可維護性，同時促進了更好的文件結構和語義化。
九、為啥需要組合選擇器
組合選擇器在CSS中扮演著至關重要的角色，它們提供了一種強大的機制來選擇具有特定關係的元素，從而允許開發者以更精細、更具體的方式應用樣式。組合選擇器的存在和使用主要基於以下幾個原因：
1. 提高選擇器的精確性
在複雜的網頁佈局中，僅使用簡單選擇器（如元素選擇器、類選擇器或ID選擇器）往往難以精確地定位到特定的元素。組合選擇器透過定義元素之間的關係（如父子關係、相鄰關係等），使得開發者可以更精確地選擇到目標元素。這種精確性對於實現特定的佈局和樣式效果至關重要。
2. 最佳化CSS的結構
使用組合選擇器，可以避免在HTML中過度使用類或ID來達到樣式目的，從而使得CSS的結構更加清晰和簡潔。這種方法有助於提高程式碼的可維護性和可讀性，同時減少了因重複定義樣式而導致的冗餘。
3. 實現更復雜的樣式設計
組合選擇器提供了一種方式來實現基於特定元素關係的複雜樣式設計。例如，開發者可以使用子選擇器（>）來僅為特定父元素的直接子元素應用樣式，或使用相鄰兄弟選擇器（+）來為緊跟在特定元素後的兄弟元素應用樣式。這種靈活性使得開發者能夠創造出更加動態和富有層次感的頁面佈局和視覺效果。
4. 提升樣式的可複用性
透過使用組合選擇器，開發者可以為特定的元素關係定義樣式，而不是針對特定的類或ID。這種做法增加了樣式的可複用性，因為相同的組合選擇器樣式可以在不同的HTML結構中被複用，只要這些結構符合選擇器定義的元素關係。
5. 保持HTML的語義化
組合選擇器的使用有助於保持HTML程式碼的語義化，因為它們允許開發者基於元素之間的自然關係來應用樣式，而不是強迫新增額外的類或ID。這樣不僅使得HTML結構更加清晰，也有助於搜尋引擎最佳化（SEO）和提高網站的可訪問性。
示例
假設我們想為一個列表中的第一個專案新增特殊樣式，我們可以使用子選擇器和偽類選擇器的組合來實現這一點：
ul > li:first-child {
color: red;
}
這個示例展示瞭如何使用組合選擇器來精確選擇並樣式化特定的元素，而無需為該元素新增額外的類或ID。
總之，組合選擇器是CSS中不可或缺的一部分，它們透過定義元素之間的關係增強了選擇器的功能，使得開發者能夠以更靈活、更高效的方式設計和實現網頁樣式。
本文轉載於：https://juejin.cn/post/7357194991339143168
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。
