仅使用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中的第一个段落上120px的上边距。

因此，解决方案应该让first para element within each text div有一个上边距，其中包括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>