div：nth-​​child（0）が機能しない

Question

nth-childインデックスセレクタを使用して、別のdiv内の特定の子divのCSS属性を変更しようとしていますが、何らかの理由で変更が発生しません。

<div class="itemgrid"> 
    <div class="insideitem"></div> 
    <div class="insideitem"></div> 
    <div class="insideitem"></div> 
    <div class="insideitem"></div> 
</div> 

.itemgrid{ 
    width:100%; 
    display:block; 
    font-style:inherit; 
} 


.itemgrid div:nth-child(2) :{ 
    border-width: 1px; 
    border-color: #dedede; 
    border-style: solid; 
} 

は、事前にありがとうございます！

Answer 1

第一子が1でない0を参照してくださいw3Schoolsある

のインデックスはまた、あなたが<style>タグであなたのCSSコードをラップする必要があるため、それは起こります。

だけに、あなたのCSSコードを変更：なし0番目の子が存在しないCSSで

<style> 
    .itemgrid{ 
     width:100%; 
     display:block; 
     font-style:inherit; 
    } 


    .itemgrid div:nth-child(1) { 
     border-width: 1px; 
     border-color: #dedede; 
     border-style: solid; 
    } 
</style> 

Answer 2

あなたが最初の子またはn番目の子のいずれかを使用し、firstelementのスタイルをターゲットにしている場合、カウントは（1 から始まります1）

.itemgrid{ 
 
    width:100vw; 
 
    display:block; 
 
    font-style:inherit; 
 
    color:red; 
 
} 
 

 

 
.itemgrid div:nth-child(1) { 
 
    border-width: 1px; 
 
    border-color: #dedede; 
 
    border-style: solid; 
 
}

<div class="itemgrid"> 
 
    <div class="insideitem">div-1</div> 
 
    <div class="insideitem">dov=2</div> 
 
    <div class="insideitem">div-3</div> 
 
    <div class="insideitem">div-4</div> 
 
</div>

Answer 3

それは1からカウントされるため：

.itemgrid{ 
 
    width:100%; 
 
    display:block; 
 
    font-style:inherit; 
 
} 
 

 

 
.itemgrid div:nth-child(1){ 
 
    border-width: 1px; 
 
    border-color: #dedede; 
 
    border-style: solid; 
 
    color : red; 
 
}

<div class="itemgrid"> 
 
    <div class="insideitem">Hello</div> 
 
    <div class="insideitem">my</div> 
 
    <div class="insideitem">dear</div> 
 
    <div class="insideitem">friend</div> 
 
</div>