nth-child не работает с табличной ячейкой CSS

Question

nth-child не работает с табличной ячейкой css

* { box-sizing: border-box; }

.table {
border: 1px solid black;
display: table;
height: 30px;
width: 200px;
}

.cell {
display: table-cell;
}

.table:nth-child(1) {
background-color: red;
width: 10%;
}

.table:nth-child(2) {
background-color: green;
width: 50%;
}

.table:nth-child(3) {
background-color: blue;
width: 20%;
}

<div class="table">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>

Answer 1

Правильный css:

* { box-sizing: border-box; }

.table {
border: 1px solid black;
display: table;
height: 30px;
width: 200px;
}

.cell {
display: table-cell;
}

.cell:nth-child(1) {
background-color: red;
width: 10%;
}

.cell:nth-child(2) {
background-color: green;
width: 50%;
}

.cell:nth-child(3) {
background-color: blue;
width: 20%;
}

Codepen

Answer 2

Селектор nth-child не работает с точки зрения родителя, а является дочерним элементом.

Подумайте, вместо "nth child этого элемента", а "If I - n-й потомок родительского контейнера" ​​

Answer 3

Селектор nth-child не работает с точки зрения родителя поэтому вы можете добавить ниже CSS и увидеть результаты

 .table .cell:nth-child(1) {
                background-color: red;
                width: 10%;
                }

                .table .cell:nth-child(2) {
                background-color: green;
                width: 50%;
                }

                .table .cell:nth-child(3) {
                background-color: blue;
                width: 20%;
                }