只使用JavaScript

Question

應用CSS樣式到第一個可用的類元素專區內，我有以下的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>