如何使用 CSS 指定類別的順序？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS 指定類別的順序？

王林

Aug 28, 2023 pm 10:01 PM

如何使用 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 id="CSS-Classes"> 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 元素。就像在class1中提到了text-align: center，但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 id="CSS-Classes"> 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 中!重要規則的使用

在 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 關鍵字。

<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 id="Important-Rule"> !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>