div：nth-child(0) 不起作用

Question

我正在尝试使用第 n 个子索引选择器在另一个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。查看 w3学校

此外，您还需要将 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

因为它从 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>

Answer 3

在 css 中没有第 0 个孩子，计数从 1 开始如果您的目标是设置第一个元素的样式，请使用第一个子元素或第 n 个子元素(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>