CSS子组合器使用疑问：为何设置div>p后后代元素也变红？

你用div>p选择器设置颜色后，内部的span.aaa也变红，是因为color是CSS继承属性——子元素会自动继承父元素的color值，所以span.aaa继承了p标签的红色样式。

要只让child1（p标签的直接文本）变红，有两种可行方案：

方案一：重置子元素颜色（无需修改HTML） #

修改CSS代码，给p标签内部的子元素重置颜色为浏览器默认值：

@charset "UTF-8";
div > p {
  color: #f00;
}
/* 重置p内部span的颜色为默认值 */
div > p span {
  color: initial;
}

initial会让元素使用CSS属性的初始值，这里color的初始值通常为黑色，和页面默认文本颜色一致。

方案二：精准包裹目标文本（需调整HTML） #

如果允许修改HTML，把child1单独用span包裹，直接给这个span设置红色：

<p>
  <span class="child-text">child1</span>
  <span class='aaa'>descendant</span>
</p>

对应CSS：

@charset "UTF-8";
div > p .child-text {
  color: #f00;
}

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