如何根據 DOM 中的位置設定具有相同類別名稱的元素的樣式？

使用類別名稱定位特定元素：CSS nth-Child 方法

挑戰： 根據類別名稱選擇性地設定具有相同類別名稱的元素的樣式

解： 利用nth-child() 或nth-of-type() 偽選擇器依照元素在標記中的順序位置來定位元素父元素。

nth-child() 偽選擇器

nth-child(n) 偽選擇器可讓您設定其父元素的第 n 個子元素的樣式。例如，要定位類別為「myclass」的第一個元素：

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

要定位第二個和第三個元素，請使用下列選擇器：

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () 偽選擇器

nth-of-type(n) 偽選擇器的功能與nth-child() 類似，但它根據元素在父級中的類型來選擇元素。當父級中有多個相同類型的元素時，這非常有用：

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}</code>

範例 HTML：

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></code>

以上是如何根據 DOM 中的位置設定具有相同類別名稱的元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！