CSS優先順序的介紹

CSS順序和優先順序是樣式化網頁的一個具有挑戰性的部分。您可能有一天會發現您嘗試套用的CSS樣式無效。看起來好像網頁沒有執行你的程式碼。這就可能是由CSS的順序或優先衝突引起的。本文將探討什麼是css順序和優先順序以及它們如何影響樣式化網頁。

優先權

瀏覽器決定哪些CSS屬性值與元素相關。此規則是基於CSS選擇器如何組成不同類型的規則。優先順序是確切的名稱，它賦予特定CSS聲明權重。每個聲明的權重或「重要性」由等於匹配選擇器的多個選擇器類型決定。 （推薦閱讀：css優先權怎麼計算？和css樣式優先權順序）

#優先權僅在一個元素具有多個聲明時才適用，目標元素將根據選擇器的固有值優先。這是一個用於衡量選擇器值差異的清單：

類型選擇器：這將是偽元素或類似h1，h1等的
類別。類別選擇器：這些包括屬性選擇器和偽類，如：懸停等
.ID選擇器：任何類型的ID選擇器。

通用選擇器對優先順序沒有任何影響，其中一些包括像（ ， - ，>，〜）這樣的組合選擇器。我們之前提到過，內聯樣式（如粗體）將始終覆蓋外部樣式表中的樣式，並且位於具有最高優先順序的鏈的頂部。

在繼續之前應該要注意一些規則。在內聯css中，html的樣式屬性首先是樣式和css檔案中的首要規則。特定選擇器也將優先於較少指定的選擇器。稍後在文件中的程式碼將覆蓋先前設定的任何先前角色。

注意：！ important例外

所有這些特殊性規則的例外是當您呼叫！ important方法時。當調用它時，它將覆蓋所有其他聲明。雖然這有效，但這通常是不好的做法。它打破了工作表中的自然級聯，並使調試變得困難。避免使用它的最佳做法很簡單。首先，您需要查看特異性規則，以便在另一個樣式元素之前查看優先順序。如果您必須使用！ important，請將其僅應用於單一頁面，從而明智地使用它。

層疊性

您可以更好地使用Cascade，而不是使用！ important方法。對於不熟悉CSS或層疊樣式表的基本方面的任何人來說，層疊是如何將不同屬性的值組合在一起的演算法。

級聯透過首先尋找正在應用於元素或屬性的所有CSS聲明來運作。它從它的起源（聲明它的地方）開始，然後是聲明的重要性。之後它將計算特異性。嵌入在HTML檔案中的任何CSS都將遵循外部樣式表，無論順序為何。重要的是要實現級聯將採取的步驟。

總的來說，如果競爭風格元素之間存在衝突，則需要考慮特殊性問題。如果一個元素的行為方式與你沒有編碼的方式相同，那麼它就是從優先權更高的東西繼承樣式。以最小的特異性開始您的樣式設計，以確保不會發生此問題。

以上是CSS優先順序的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！