僅使用javascript將CSS樣式應用於div中的第一個可用類元素

Question

我有以下html：

<div class="comment">
  <div class="text">
     <p class="para">test</p>
     <p class="para">test2</p>
  </div>
</div>
<div class="comment">
  <div class="text">
     <p class="para">test3</p>
     <p class="para">test4</p>
     <p class="para">test5</p>
     <p class="para">test6</p>
  </div>
</div>
<div class="comment">
  <div class="text">
     <p class="para">test7</p>
     <p class="para">test8</p>
  </div>
</div>

然后在頁面底部是一些javascript：

<script>
 var x = document.getElementsByClassName("para");
 var i;
 for(i=0;i<x.length;i++){
   x[i].style.marginTop="120px";
 }
 </script>

javascript循環遍歷所有para類元素，並應用120px margin top 。

問題是我只希望每個text div的第一個para具有120px的頁邊距頂部。

因此，解決方案應first para element within each text div的first para element within each text div具有margin top，其中應包括test,test3,test7

Answer 1

如果您願意使用CSS，則可以使用.text > .para:first-child來設置margin-top 。 它肯定比使用Javascript更有效。

 .text > .para:first-child { margin-top: 120px; } 

 <div class="comment"> <div class="text"> <p class="para">test</p> <p class="para">test2</p> </div> </div> <div class="comment"> <div class="text"> <p class="para">test3</p> <p class="para">test4</p> <p class="para">test5</p> <p class="para">test6</p> </div> </div> <div class="comment"> <div class="text"> <p class="para">test7</p> <p class="para">test8</p> </div> </div> 

您也可以將相同的選擇器與document.querySelectorAll一起使用，以獲取匹配的元素，並根據需要在其上設置margin-top 。

 var elems = document.querySelectorAll('.text > .para:first-child'); elems.forEach(function(elem) { elem.style["margin-top"] = "120px"; }); 

 <div class="comment"> <div class="text"> <p class="para">test</p> <p class="para">test2</p> </div> </div> <div class="comment"> <div class="text"> <p class="para">test3</p> <p class="para">test4</p> <p class="para">test5</p> <p class="para">test6</p> </div> </div> <div class="comment"> <div class="text"> <p class="para">test7</p> <p class="para">test8</p> </div> </div>