Html 如何将第一个与其他孩子拥有相同类的孩子的div样式化

我想使用类.child和.grander在第一个子目录中设置div的样式（比如更改宽度或颜色），这些类也在其他子目录中，但保持另一个子目录的完整性。这里我只能选择第一个孩子

DIV.parent>DIV:first-child.孙子{背景：红色；宽度：70px；}
.孙子{字体大小：10px；宽度：50px；高度：50px；背景：黄色；}
.child{padding:5px；}

第一
第二
第三
第四

您可以尝试使用第n个子（n）选择器。例如：

DIV.parent> DIV:nth-child(1) {border:solid 10px #000;}
DIV.parent> DIV:nth-child(2) {border:solid 10px #000;}

您可以尝试使用第n个子（n）选择器。例如：

DIV.parent> DIV:nth-child(1) {border:solid 10px #000;}
DIV.parent> DIV:nth-child(2) {border:solid 10px #000;}

---

你是说像这样的

你的问题有点不清楚

代码

---

你是说像这样的

你的问题有点不清楚

代码

---

谢谢大家伸出援手，但我想扩大宽度并更改颜色。仅在first child内使用.孙子。使用此

.child:first child.孙子{边框：实心10px#000；背景：红色；宽度：30%；高度：10%}

谢谢大家伸出援手，但是我想在first child内扩展.granner的宽度并更改其颜色。使用此

.child:first child.granner{边框：实心10px#000；背景：红色；宽度：30%；高度：10%}

.child:first-child > .grandchild{
  width:200px;
  background:#f22;
}