當我們使用 CSS 時，基本概念之一是了解如何將樣式應(yīng)用于網(wǎng)頁。 “級聯(lián)” 正是定義了當同一元素有多種樣式時瀏覽器如何決定應(yīng)用哪些 CSS 規(guī)則的機制。了解樣式流以及級聯(lián)的工作原理不僅可以提高我們作為開發(fā)人員的技能，還可以幫助我們編寫更干凈、更高效和可維護的 CSS 代碼。

CSS中的瀑布是什么？

級聯(lián)是CSS用來確定將哪些樣式應(yīng)用于頁面上的元素的過程。此過程遵循基于三個主要因素的特定規(guī)則和優(yōu)先級：

1. 特異性： 選擇器的具體程度。

2. 重要性： 是否已應(yīng)用 !important 屬性。

3. 聲明順序：規(guī)則在樣式表中所在的位置。

瀑布評估這些規(guī)則以決定應(yīng)應(yīng)用哪種樣式。如果兩個規(guī)則具有相同級別的特異性并且都不使用 !important，則瀏覽器將按照聲明的順序應(yīng)用最接近樣式表末尾的規(guī)則。

風格流如何運作

CSS 中的樣式流是指根據(jù)樣式規(guī)則的特殊性和位置應(yīng)用樣式規(guī)則的順序。讓我們來分解最重要的幾點：

• 瀏覽器樣式： 所有瀏覽器默認都會應(yīng)用某些樣式（例如 body 元素上的邊距或無序列表 ul ）。這些樣式首先應(yīng)用，并且可以使用我們的自定義 CSS 規(guī)則覆蓋。

• 外部樣式：我們在外部樣式表中定義的樣式，通常與 HTML 中的 link 標簽鏈接。這些樣式比瀏覽器樣式具有更高的優(yōu)先級。

• 內(nèi)聯(lián)樣式： 這些樣式是通過 style 屬性直接應(yīng)用在 HTML 中的樣式。它們具有更高的特異性，通常會覆蓋外部樣式表規(guī)則。

• 規(guī)則 !important: 使用 !important 賦予規(guī)則最高優(yōu)先級，覆蓋任何其他應(yīng)用的樣式，無論具體情況如何。

基本瀑布示例

讓我們想象一個具有從不同位置應(yīng)用的多個規(guī)則的元素：

HTML

假設(shè)我們的 CSS 中有以下規(guī)則

CSS

在這種情況下，文本將顯示為藍色，因為cascade 是最后一個定義的聲明，并且與之前的聲明具有相同的特異性。

但是你可能會遇到這種情況，雖然特異性和級聯(lián)是相同的，但你將能夠看到顯著的變化。

CSS

在這種情況下，文本將顯示為綠色，因為規(guī)則 color: green !important; 由于使用了 !important 具有最高優(yōu)先級，這會忽略兩個特殊性和級聯(lián)。

申報訂單示例

正如我之前提到的，如果我們有兩條具有相同特性但在不同位置聲明的規(guī)則，則樣式表中較低的規(guī)則將適用：

該段落將為紅色，因為該規(guī)則是在建立黑色的規(guī)則之后聲明的。

管理樣式級聯(lián)和流的良好實踐

1. 最小化 !important 的使用： 雖然在特定情況下很有用，但過度使用 !important 可能會使你的 CSS 難以維護和覆蓋。僅在確實有必要的情況下使用它。

2. 使用類而不是 ID：類的特異性比 ID 低，可以更靈活地覆蓋樣式，而無需生成過于具體的 CSS。

3. 從一般到具體組織您的 CSS： 首先定義全局樣式，然后繼續(xù)討論更具體的規(guī)則。這遵循邏輯流程并使代碼更易于理解。

4. 對選擇器進行一致的分組和排序：將影響相同元素的規(guī)則放在一起，以便更輕松地可視化瀑布并進行調(diào)整。

5. 記錄規(guī)則！重要：如果您需要使用！重要，請記錄原因。這將幫助您記住原因并降低代碼混亂的風險。

特異性和級聯(lián)可視化工具

有在線工具和瀏覽器擴展，可讓您可視化選擇器的特殊性并查看應(yīng)用于特定元素的樣式流。例如：

• Chrome DevTools：通過檢查元素，您可以查看正在應(yīng)用哪些 CSS 規(guī)則以及應(yīng)用的順序。

• 特異性計算器：特異性計算器等工具可讓您計算選擇器的特異性。

• CSS 統(tǒng)計信息： 一種資源，可讓您查看 CSS 統(tǒng)計信息，包括選擇器的特異性級別。

概括

樣式的級聯(lián)和流動是 CSS 的基本原則，但是充分理解它們可以對我們組織和管理樣式的方式產(chǎn)生很大的影響。通過了解級聯(lián)的應(yīng)用方式，我們可以將 CSS 構(gòu)建得更干凈、更高效、更易于維護。

現(xiàn)在您了解了級聯(lián)，您將能夠更好地控制 CSS 樣式并避免意外的覆蓋問題！

以上是了解 CSS 中樣式的級聯(lián)和流程的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！