SASS 中的最後一個子級和最後一個類型選擇器-css教學-PHP中文網

SASS 中的最后一个子级和最后一个类型选择器

SASS 比普通 CSS 提供了各種功能來編寫簡單且可維護的程式碼，而進階選擇器就是其中之一。 SASS 包含最後一個子級和最後一個類型選擇器，我們將在本教程中討論。

SASS 中的最後一個子選擇器

「last-child」選擇器允許開發人員選擇父元素內的最後一個元素。此外，它還允許您選擇最後一個 HTML 元素，無論該元素的類型為何。如果最後一個元素包含巢狀子元素，它也會將樣式套用於巢狀元素，因為它們是最後一個子元素的一部分。

文法

使用者可以按照以下語法在 CSS 中使用「last-child」選擇器。

.element :last-child {
   /* CSS code */
}

登入後複製

上述語法將選擇包含「element」類別名稱的 HTML 元素的最後一個子元素。

範例

在index.html 檔案中，我們建立了「container」div 元素，並新增了兩個段落和一個div 元素作為最後一個子元素。

在 SCSS 檔案中，我們使用「last-child」選擇器來選擇容器 div 元素的最後一個元素。在輸出中，我們可以觀察到樣式已套用於子 div 元素。

檔名 – index.html

<html>
<head>
   <link rel = "stylesheet" href = "css/style.css">
</head>
<body>
   <h2> Using the <i> :last-child selector </i> in SCSS. </h2>
   <div class = "container">
      <p> First paragraph </p>
      <p> Last paragraph </p>
      <div> Not a paragraph but last child. </div>
   </div>
</body>
</html>

登入後複製

檔名 – style.scss

.container :last-child {
   color: red;
}

登入後複製

編譯後，產生如下程式碼。

檔名 – style.css

.container :last-child {
   color: red;
}

登入後複製

範例

<html>
<head>
   <style>
      /* style.css obtained from filename – style.scss */
      .container :last-child {
         color: red;
      }
   </style>
</head>
<body>
   <h2> Using the <i> :last-child selector </i> in SCSS </h2>
   <div class = "container">
      <p> First paragraph </p>
      <p> Last paragraph </p>
      <div> Not a paragraph but last child. </div>
   </div>
</body>
</html>

登入後複製

範例

在下面的範例中，我們在父 div 元素中新增了多個子 div 元素。此外，我們在最後一個 div 元素中新增了多個層級的巢狀子元素。

在SCSS檔案中，我們使用last-child選擇器來選擇父div元素的最後一個元素。在輸出中，使用者可以觀察到樣式也應用於最後一個子元素的嵌套子元素。

檔名 – index.html

<html>
<head>
   <link rel = "stylesheet" href = "css/style.css">
</head>
<body>
   <h2> Using the <i> :last-child selector </i> in SCSS. </h2>
   <div class = "parent">
      <div class = "child"> First </div>
      <div class = "child"> Second </div>
      <div class = "child"> Third
         <div class = "nested-level-1"> Nested Level 1
            <div class = "nested-level-2"> Nested Level 2 </div>
         </div>
      </div>
   </div>
</body>
</html>

登入後複製

檔名 – style.scss

.parent :last-child {
   font-size: 3rem;
   color: green;
   font-weight: bold;
}

登入後複製

編譯後，產生如下程式碼。

檔名 – style.css

.parent :last-child {
   font-size: 3rem;
   color: green;
   font-weight: bold;
}

登入後複製

範例

<html>
<head>
   <style>
      /* style.css obtained from filename – style.scss */
      .parent :last-child {
         font-size: 3rem;
         color: green;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <h2> Using the <i> :last-child selector </i> in SCSS. </h2>
   <div class = "parent">
      <div class = "child"> First </div>
      <div class = "child"> Second </div>
      <div class = "child"> Third
         <div class = "nested-level-1"> Nested Level 1
               <div class = "nested-level-2"> Nested Level 2 </div>
         </div>
      </div>
   </div>
</body>
</html>

登入後複製

SASS 中的最後一個類型選擇器

「last-of-type」選擇器允許開發人員選擇父 div 元素中特定類型的最後一個元素。因此，我們需要在使用“last-of-type”選擇器時使用選擇器指定元素類型。我們可以使用類別名稱、標籤名稱、元素名稱、id 等來指定元素類型。

文法

使用者可以依照下列語法使用 SASS 的「last-of-type」CSS 選擇器。

p:last-of-type {
   /* CSS code */
}

登入後複製

上述語法選擇父元素中的最後一個「p」元素。

範例

在下面的範例中，我們建立了類別名稱等於「multiple」的 div 元素。之後，我們插入了兩個段落元素和最後一個 div 元素。

在 SASS 中，我們使用「last-of-type」選擇器來選擇「multiple」元素中的最後一個「p」元素。使用者可以在輸出中觀察到樣式應用於最後一個“p”元素，即使它不是最後一個子元素。

檔名 – index.html

<html>
<head>
   <link rel = "stylesheet" href = "css/style.css">
</head>
<body>
   <h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
   <div class = "multiple">
      <p class = "single"> First </p>
      <p class = "single"> Second </p>
      <div class = "last">
         Last element
      </div>
   </div>
</body>
</html>

登入後複製

檔名 – style.scss

.multiple p:last-of-type {
   color: blue;
   font-size: 3rem;
}

登入後複製

編譯後，產生如下程式碼。

檔名 – style.css

.multiple p:last-of-type {
   color: blue;
   font-size: 3rem;
}

登入後複製

範例

<html>
<head>
   <style>
      /* style.css obtained from filename – style.scss */
      .multiple p:last-of-type {
         color: blue;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
   <div class="multiple">
      <p class="single"> First </p>
      <p class="single"> Second </p>
      <div class="last">
         Last element
      </div>
   </div>
</body>
</html>

登入後複製

範例

在下面的範例中，我們建立了包含「fruit」類別的多個 div 元素。此外，我們建立了最後一個包含「bike」類別名稱的 div 元素。

在 SASS 程式碼中，我們使用「.fruit :last-of-type」選擇器來選擇包含「fruit」類別名稱的最後一個元素。在輸出中，使用者可以觀察到它設定了倒數第二個 div 元素的樣式，這是包含「fruit」類別名稱的最後一個元素。

檔名 – index.html

<html>
<head>
   <link rel = "stylesheet" href = "css/style.css">
</head>
<body>
   <h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
   <div class = "fruit">
      Apple
   </div>
   <div class = "fruit">
      <ul>
         <li> Banana </li>
         <li> Orange </li>
         <li> Watermelon </li>
      </ul>
   </div>
   <div class = "bike">
      This is bike div.
   </div>
</body>
</html>

登入後複製

檔名 – style.scss

.fruit :last-of-type {
   background-color: orange;
   color: white;
   font-size: 2rem;
}

登入後複製

編譯後，產生如下程式碼。

檔名 – style.css

.fruit :last-of-type {
   background-color: orange;
   color: white;
   font-size: 2rem;
}

登入後複製

範例

<html>
<head>
   <style>
      /* style.css obtained from filename – style.scss */
      .fruit :last-of-type {
         background-color: orange;
         color: white;
         font-size: 2rem;
      }
   </style>
</head>
<body>
   <h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
   <div class="fruit">
      Apple
   </div>
   <div class="fruit">
      <ul>
         <li> Banana </li>
         <li> Orange </li>
         <li> Watermelon </li>
      </ul>
   </div>
   <div class="bike">
      This is bike div.
   </div>
</body>
</html>

登入後複製

使用者學習如何使用 SASS 中的「last-child」和「last-of-type」選擇器。 “last-child”選擇器用於在任何條件下選擇父元素中的最後一個元素。 ‘last-of-type’元素用於選擇父元素中特定類型的最後一個子元素。

以上是SASS 中的最後一個子級和最後一個類型選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！