資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 指定類的順序？
層疊樣式表 (CSS) 是 Web 開發中一個強大的元件，它使開發者能夠確定其網站的視覺外觀。在 CSS 中，類用作選擇器，使我們能夠將幾種特定樣式應用於元素。您還可以為特定元素使用多個類。
但是，當您將多個類應用於一個元素時，有必要了解如何指定這些類的呈現順序，以避免差異和意外結果。在本文中，我們將討論指定 CSS 中類順序的不同方法，以及特異性和級聯規則的重要性，這些規則有助於確定優先順序。
什麼是 CSS 中的類？
在 CSS 中，類是一個選擇器，用於將特定樣式集應用於 HTML 元素。它們是強大的工具，使我們能夠將元素組合在一起，並在網頁上的多個元素之間保持一致性。對於大型網站，它允許我們重用許多元素的 CSS 樣式。
為元素使用多個類
如果您在 CSS 中定義了一組類，則可以將它們的組合用於特定元素，以使其獨一無二且具有吸引力。但是，您必須指定類的順序，以便編譯器能夠順利執行程式碼並根據您的需求提供輸出。這是透過**級聯**和**特異性**規則完成的。
我們在 CSS 檔案中定義類的順序用於確定在將多個類應用於元素時的優先順序。這是因為 CSS 是**級聯**的，這意味著編譯器從**下到上**和**從右到左**讀取它。因此，在 CSS 程式碼中最後提到的一個具有**優先順序**。讓我們透過一個例子更好地理解這一點。
示例
假設您在 CSS 檔案中定義了兩個類。
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
由於在 CSS 程式碼中.class2在.class1之後宣告，因此class2具有優先順序。因此，當我們將class1和class2都應用於 div 元素時，div 元素的樣式大多是根據class2設定的。
但是，您可以看到在class2中未提及但在class1中存在的屬性將應用於 div 元素。例如，text-align: center在class1中提及，但在class2中未提及。但是，最後一個 div 元素仍然居中對齊。這是因為class1中唯一的屬性將按原樣應用於元素，但是，對於兩個類中相同的屬性，編譯器使用級聯規則來呈現它們。
類的順序
HTML 中編寫的類順序並不決定優先順序。請考慮以下示例
示例
假設您定義了與上述示例類似的兩個類。但是，您已更改了 HTML 程式碼中類的順序。您認為結果會怎樣？它與前一個不同嗎？讓我們來看看。
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
如您所見，結果沒有變化。樣式將僅根據 CSS 中提到的類順序應用。
在 CSS 中使用 !important 規則
在 CSS 中，!important 規則使開發人員能夠覆蓋樣式的級聯順序，並確保所需的特定樣式具有最高優先順序。
語法
selector{
property: value !important;
}
如果您在 CSS 屬性旁邊使用 !important 關鍵字，則編譯器將確保將其應用於該元素，而不管樣式的任何特異性順序如何。讓我們看一個例子。
輸入
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
示例
在下面的示例中，由於b在a之前，因此，樣式是根據b為最後一個 div 元素應用的。但是，文字的顏色是根據類“a”中編寫的應用的，這意味著文字顏色為紅色。這是因為我們在類“a”中對顏色屬性使用了!important關鍵字。
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
結論
在本文中，我們討論了用於在將多個類應用於特定元素時指定 CSS 中類順序的級聯和特異性規則。我們還討論了!important規則，該規則用於覆蓋任何特異性順序。
682 次瀏覽
