nth-child 无法使用 CSS table-cell

Question

nth-child 不适用于 css table-cell

* { 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

nth-child 选择器不是从父元素的角度操作，而是从子元素的角度操作。

思考，而不是"This element's nth child"，而是"If I am the nth child of a parent container"

Answer 2

The nth-child selector does not operate from the parent's perspective so can you please add below css and see results

 .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%;
                }

Answer 3

正确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

nth-child 无法使用 CSS table-cell

nth-child not working with CSS table-cell

css

css-selectors

css-tables