如何使用 CSS 或 JavaScript 在 HTML 中設定元素類型的第一個實例的樣式？

識別整個文件中特定元素類型的第一個實例

問題：

如何利用CSS或JavaScript 來定位和設計整個HTML 文件中特定元素類型的首次出現，無論其在文件中的位置如何結構？

答案：

基於CSS 的解決方案

不幸的是，CSS 本身並不能提供與第一個匹配的功能元素類型在整個文件中的出現次數。根據 CSS 規範，:first-of-type 偽類僅適用於其父元素中其類型的第一個同級。

基於 JavaScript 的解決方案

1。 :first-of-type Emulation

使用JavaScript，我們可以透過引入自訂類別「first-of-type」並利用querySelector() 方法來擷取第一個符合來實現此功能所需類型的元素。然後，我們將此自訂類別指派給檢索到的元素：

document.querySelector('p').className += ' first-of-type';

2。自訂匹配函數

我們也可以開發自訂JavaScript 函數來識別特定元素類型的第一次出現並為其設定樣式：

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i].tagName === element.tagName) {
      if (count === index) {
        return siblings[i];
      }
      count++;
    }
  }
  return null;
}

nthIndexOfType(document.querySelector('p'), 1).style.backgroundColor = 'pink';

此函數接受兩個參數：元素我們想要搜尋以及我們想要定位的事件的索引。它迭代所有同級元素並傳回指定類型的第一個元素，套用所需的樣式。

以上是如何使用 CSS 或 JavaScript 在 HTML 中設定元素類型的第一個實例的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！