如何为不同子元素应用不同CSS样式？（解决textClass元素margin-top设置无效问题）

嘿，你的问题出在CSS选择器的层级匹配错误上！咱们先理清楚HTML的结构：
.parent的直接子元素是三个<div>，而.textClass是嵌套在这些<div>里面的<section>之下的，并不是.parent的直接子元素。你原来用的.parent>.textClass是在找.parent的直接子元素里的.textClass，自然匹配不到任何元素，样式也就不会生效啦。

正确的CSS写法 #

我们需要调整选择器，先定位到.parent的直接子<div>，再找到里面的.textClass：

/* 第一个父div里的textClass */
.parent > div:first-child .textClass {
  margin-top: -1px;
}

/* 除第一个父div外，其他里面的textClass */
.parent > div:not(:first-child) .textClass {
  margin-top: -3px;
}

如果想要更精确地匹配嵌套层级（避免意外匹配到其他嵌套的.textClass），也可以写成：

.parent > div:first-child > .sectionWrapper > .textClass {
  margin-top: -1px;
}

.parent > div:not(:first-child) > .sectionWrapper > .textClass {
  margin-top: -3px;
}

为什么这样能行？ #

• parent > div:first-child 精准匹配.parent下的第一个直接子<div>，然后通过空格选中它里面所有的.textClass（或者用>继续精准匹配层级）；
• parent > div:not(:first-child) 匹配.parent下除第一个之外的所有直接子<div>，再选中里面的.textClass。

这样修改后，你的样式就能正确应用到对应的元素上啦～

内容的提问来源于stack exchange，提问作者Anurag Mishra