將樣式應用于DOM中具有特定類的第一個div-有解無憂

我有一個可重復使用的手風琴組件，但我想要實作的是，與其他手風琴相比，第一個手風琴具有更大的填充集。這可以通過CSS實作嗎？如果不是，那么通過 jQuery/JS 實作這一目標的最佳方法是什么。

注意：我不能只在第一部分添加一個類，正如我所說，它是一個可重用的組件，所以標記總是相同的。

<!-- Apply padding to this section only -->
<section class="accordion-wrapper">
 <p>Some content in here</p> 
</section>

<section class="accordion-wrapper">
 <p>Some content in here</p> 
</section>

<section class="accordion-wrapper">
 <p>Some content in here</p> 
</section>

<section class="accordion-wrapper">
 <p>Some content in here</p> 
</section>

uj5u.com熱心網友回復：

更新：第一個孩子不起作用，我已經更新了答案

您可以通過使用 pure 的解決方法來實作這種方式CSS：選擇作為同一個類的兄弟的類的每個元素 -> 反轉它， -> 再次按類選擇。

作業 Codepen：https ://codepen.io/tusharg09/pen/oNoOxrq

:not(.accordion-wrapper ~ .accordion-wrapper).accordion-wrapper {
    color: red;
}

<section class="accordion-wrapper">
  <p>Some content in here</p>
</section>

<section class="accordion-wrapper">
  <p>Some content in here</p>
</section>

<section class="accordion-wrapper">
  <p>Some content in here</p>
</section>

<section class="accordion-wrapper">
  <p>Some content in here</p>
</section>

uj5u.com熱心網友回復：

假設手風琴部分是某些父元素的唯一子元素，則可以通過 css 完成。您可以使用first-child偽類：

.accordion-wrapper:first-child {
   ...
}

uj5u.com熱心網友回復：

雖然在簡單的情況下您可能只能使用 CSS，但對于適用于任何 HTML 結構的通用解決方案，您需要使用一點 JS。

此代碼段在整個檔案中查找具有該類的元素的第一次出現。然后它添加另一個類來設定填充。

<!doctype html>
<html>

<head>
  <style>
    .accordion-wrapper.extra {
      padding: 10px;
    }
  </style>
</head>

<body>
  <!-- Apply padding to this section only -->
  <section class="accordion-wrapper">
    <p>Some content in here</p>
  </section>

  <section class="accordion-wrapper">
    <p>Some content in here</p>
  </section>

  <section class="accordion-wrapper">
    <p>Some content in here</p>
  </section>

  <section class="accordion-wrapper">
    <p>Some content in here</p>
  </section>

  <script>
    const first = document.querySelector('.accordion-wrapper');
    first.classList.add('extra');
  </script>
</body>

</html>

更新：由于給出了上面的答案，我已經看到了這個特定問題的 HTML 結構，并且只能使用 CSS 來解決：

main section:first-of-type

作為選擇器。請注意，如果結構發生變化，它可能不正確，因為如果將其他此類部分放在 main 上方，第一個答案可能不是正確的。

將這兩種方法結合起來可能是最安全的，并且在 JS 中選擇 main 中的第一部分。當然取決于實際使用情況。

uj5u.com熱心網友回復：

那么有幾種方法可以實作這一點。由于您嘗試制作手風琴，所以您基本上知道您的哪些手風琴鍵的形狀會有所不同，對吧？

因此，您可以使用例如為您的 div 分配第二個類。或者另一種方式是，:nth-child()就像每隔一個或第三個鍵都會以另一種方式成形。您可以在代碼本身之外找到示例代碼片段。

.accordion-wrapper {
  display:flex;
  flex-direction: column;
}

.accordion-key {
  border: 1px solid #333;
  padding: 5px 0 5px 10px;
}

.accordion-keyBlack {
  background-color: #111;
  color: #fff;
  padding: 10px 0 10px 20px;
}

<div class="accordion-wrapper">
  <div class="accordion-key">A</div>
  <div class="accordion-key accordion-keyBlack">B</div>
  <div class="accordion-key">C</div>
  <div class="accordion-key">D</div>
  <div class="accordion-key">E</div>
</div>

或者您可以使用 :nth-child() 例如定義每隔一個鍵為黑色或其他。進一步閱讀，在這里：https ://developer.mozilla.org/de/docs/Web/CSS/:nth-child

.accordion-key:nth-child(2n) {
  background-color: #111;
  color: #fff;
  padding: 10px 0 10px 20px;
}

當然你也可以使用 JS，但是我們需要更多的細節，比如按鍵排列本身的邏輯。

uj5u.com熱心網友回復：

使用 CSS 無法選擇具有特定類的第一個 div 。最接近的結果是：

section {
  padding: 10px;
  margin: 10px;
  background: red;
}
.accordion-wrapper:first-child,
:not(.accordion-wrapper)   .accordion-wrapper {
  padding: 10px;
  background: yellow;
}

<section class="something-random"></section>
<!-- first div with class is here -->
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>

它選擇第一個子.accordion-wrapper:first-child元素或前面沒有具有相同類的元素的元素:not(.accordion-wrapper) .accordion-wrapper。

這種方法的問題是這種情況：

section {
  padding: 10px;
  margin: 10px;
  background: red;
}
.accordion-wrapper:first-child,
:not(.accordion-wrapper)   .accordion-wrapper {
  padding: 10px;
  background: yellow;
}

<section class="something-random"></section>
<!-- first div with class is here -->
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="something-random"></section>
<!-- but this is not first with class -->
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>
<section class="accordion-wrapper"></section>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439719.html

標籤：javascript jQuery css

上一篇：Cypress.$('abc').text()回傳未定義

下一篇：如果添加新資料mysql播放音頻