如何對 CSS 類別中的第一個和最後一個元素設定不同的樣式？

了解元素上的 CSS 類別實作

在 HTML 中，可以使用 class 屬性將多個類別套用到單一元素。每個類別可以定義不同的樣式。

對元素套用不同的樣式

在給定的場景中，任務是將特定樣式套用到 .social div 中的第一個和最後一個元素。

1. 第一個元素（無頂Padding):

   • 使用第一個類別來定位.social 中的第一類個元素。
   • 在.social.first CSS 規則中將padding-top 屬性定義為0 .

2. 最後一個元素（無底部Border):

   • 使用最後一個類別來定位.social 中的最後一個元素。
   • 在.social.last CSS 規則中將border-bottom 屬性定義為none .

HTML代碼：

<div class="social first">
  ...
</div>

CSS 程式碼：

.social {
  width: 330px;
  height: 75px;
  float: right;
  text-align: left;
  padding: 10px 0;
  border-bottom: dotted 1px #6d6d6d;
}

.social.first {
  padding-top: 0;
}

.social.last {
  border-bottom: none;
}

在上面的CSS中，.social 類別定義了其中所有元素的預設樣式。 .social.first 和 .social.last 類別分別覆蓋第一個和最後一個元素的這些樣式。

透過利用這種方法，您可以將不同的樣式應用於父元素中的特定元素，從而確保更多對網頁的佈局和外觀進行精細控制。

以上是如何對 CSS 類別中的第一個和最後一個元素設定不同的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！