層疊樣式表 (CSS) 是 Web 開發的一個強大元件，它使開發人員能夠確定其網站的視覺外觀。在 CSS 中，類別用作選擇器，使我們能夠將多種特定樣式應用於元素。您也可以對特定元素使用多個類別。
但是，當您將多個類別套用到一個元素時，有必要知道如何指定這些類別的呈現順序，以避免差異和意外結果。在本文中，我們將討論在 CSS 中指定類別順序的不同方法，以及有助於確定優先順序的特異性和級聯規則的重要性。
在 CSS 中，類別是用於將特定樣式集套用至 HTML 元素的選擇器。它們是強大的工具，使我們能夠將元素分組在一起並保持網頁上多個元素的一致性。它允許我們在大型網站的許多元素中重複使用 CSS 樣式。
如果您在 CSS 中定義了一組類，則可以將它們組合用於特定元素，以使其獨特且有吸引力。但是，您必須指定類別的順序，以便編譯器順利執行程式碼並根據您的需求提供輸出。這是透過級聯和特異性規則來完成的。
我們在 CSS 檔案中定義類別的順序用於確定在將多個類別應用於元素時它們的優先順序。這是因為 CSS 是級聯，這意味著編譯器從最後到頂部和從右到左讀取它。因此，CSS 程式碼中最後提到的那個獲得優先權。讓我們透過一個範例來更好地理解這一點。
假設您在 CSS 檔案中定義了兩個類別。
CSS Classes
Here, we have applied class1 to the div element.Here, we have applied class2 to the div element.This is an example. Here, we will apply both classes to the div element.
由於在 CSS 程式碼中.class2是在.class1之後宣告的，因此class2具有優先權。因此，當我們將class1和class2套用到 div 元素時，div 元素的樣式主要根據class2 進行設計。
但是，您可以看到class2中未提及但class1中存在的屬性套用於 div 元素。就像在class1中提到了text-align: center，但class2中沒有提到。但最後一個 div 元素仍然居中對齊。這是因為class1中唯一的屬性將原樣應用於元素，但是，對於兩個類別中相同的屬性，編譯器使用級聯規則來渲染它們。 < /p>
用 HTML 寫的類別的順序並不會決定優先順序。考慮以下範例
假設您定義了兩個類似於上面範例的類別。但是，您已經更改了 HTML 程式碼中類別的順序。您認為結果會怎樣？會和之前的有所不同嗎？讓我們看看。
CSS Classes
This is an example. Here, we will apply first class1 and then class2 to the div element.This is an example. Here, we will apply first class2 and then class1 to the div element.
如您所見，結果沒有改變。樣式將僅根據 CSS 中提到的類別的順序套用。
在 CSS 中，!important 規則使開發人員能夠覆蓋樣式的級聯順序，並確保所需的特定樣式獲得最高優先級。
selector{ property: value !important; }
如果您在 CSS 屬性旁邊使用 !important 關鍵字，則編譯器將確保將其套用到該元素，無論樣式的任何特定順序為何。讓我們來看一個例子。
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
在下列範例中，由於b位於a之前，因此，將根據最後一個 div 元素的b套用樣式。但是，文字的顏色依照類別「a」中的寫入方式應用，這表示文字的顏色為紅色。這是因為我們在“a”類別中的color屬性使用了!important關鍵字。
!Important Rule
Here, we have applied only class "a" to the div element.Here, we have applied only class "b" to the div element.Here, we have applied both the classes to the div element.
在本文中，我們討論了級聯和特異性規則，用於在將多個類別應用於特定元素時指定 CSS 中類別的順序。我們也討論了用於覆寫任何特異性順序的!important規則。
以上是如何使用 CSS 指定類別的順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
