第n个子项不使用CSS表格单元格

第n个子项不使用css表格单元格

*{框大小：边框框；}
.桌子{
边框：1px纯黑；
显示：表格；
高度：30px；
宽度：200px；
}
.细胞{
显示：表格单元格；
}
.表：第n个孩子（1）{
背景色：红色；
宽度：10%；
}
.表：第n个孩子（2）{
背景颜色：绿色；
宽度：50%；
}
.表：第n个孩子（3）{
背景颜色：蓝色；
宽度：20%；
}

---

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

思考，而不是“此元素的第n个子元素”，而是“IfIam父容器的第n个子元素”

---

第n个子选择器不从父对象的角度操作 所以你可以添加下面的css并查看结果吗

正确的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%;
}

---

您是否尝试过将呼叫从

。表：nth-child（）

更改为

。单元格：nth-child（）

？似乎有你想要的效果，但我不是CSS专家，所以我不能肯定这是否是一个主要的罪恶。酷。{.table.cell:nth-child（）}它可以工作。这种奇怪的逻辑。你会发现CSS有时是非常易变的。如果你认识一个非常擅长CSS的人，那就让他/她运行它，以确保我没有给你一个糟糕的解决方案。我敢打赌，有一些筑巢的事情正在发生，使得第n个孩子不能工作，但我不能肯定。这确实是初学者的误解

* { 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%;
}