訪問第一<section>未知號碼鑑於以下標記的div

Question

的內：

<div className="row"> 
    <noscript></noscript> 
</div> 
<div className="row"> 
    <noscript></noscript> 
</div> 
<div className="row"> 
    <section></section> 
</div> 
<div className="row"> 
    <section></section> 
</div> 
<div className="row"> 
    <section></section> 
</div> 
... 

有可能在包含noscript頂部是任何數量的div。

如何才能訪問row中的第一個section？

Answer 1

使用CSS不可能實現這一點，您需要使用Javascript。

說明：

因爲:nth-of-type(1)，nth-child()，:first-of-type和:first-child總會給你所有的部分，因爲他們是第一個孩子和他們的父母DIV第一section類型。

所有這些選擇器將只能工作，如果您將所有部分放在一個父div與class="row"。

JavaScript解決方案：

您可以使用document.querySelector(".row section")來獲得一個div首節與class="row"。

但隨着CSS只有這將是不可能的：

document.querySelector(".row section").innerHTML = "I am the first section !";

.row { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
}

<div class="row"> 
 
    <noscript></noscript> 
 
</div> 
 
<div class="row"> 
 
    <noscript></noscript> 
 
</div> 
 
<div class="row"> 
 
    <section></section> 
 
</div> 
 
<div class="row"> 
 
    <section></section> 
 
</div> 
 
<div class="row"> 
 
    <section></section> 
 
</div>

注：在HTML

而且它class="row"，而不是className="row"，在其實className用於Javascript。

Answer 2

或者到@chsdk，你可以使用。首先（）的jQuery的方法

HTML：

<div class="row"> 
    <noscript></noscript> 
</div> 
<div class="row"> 
    <noscript></noscript> 
</div> 
<div class="row"> 
    <section>1</section> 
</div> 
<div class="row"> 
    <section>2</section> 
</div> 
<div class="row"> 
    <section>3</section> 
</div> 

CSS

.row { 
    display:block; 
    height:50px; 
    width:50px; 
} 

section { 
    display:block; 
    height:20px; 
    width:20px; 
} 

jQuery的

$('.row section').first().css('background','#111'); 

https://jsfiddle.net/ojuun4uh/

Answer 3

使用JavaScript，getElementsByTagName方法可以爲您提供幫助。試試這個：

var section = document.getElementsByTagName('section').item(0);