Question

第n个孩子无法使用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

第n个子选择器不是从父项的角度操作，而是子元素。

请考虑，而不是“如果我是父容器的第n个孩子”

Answer 3

从父级的角度来看，第n个子级选择器不起作用所以可以请您在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%;
                }

nth-child无法与CSS表格单元一起使用

3 个答案: