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

此外，您需要将CSS代码包装在<style>标记中。

只需将您的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

在css中没有第0个孩子，count从1开始 如果您要定位第一个元素，请使用first-child或nth-child（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开始计算：

＆＃13;

＆＃13;

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


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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;