为何内联CSS与外部样式表下jQuery children()样式效果不同？

你遇到的差异核心在于样式作用目标与CSS继承规则的结合，而非“外部样式表”和“内联CSS”本身的本质区别：

1. 原示例的逻辑（外部样式表） #

原示例中，外部样式表除了给li设置红色文本，还会给span显式设置黑色文本（类似如下规则）：

.child > li {
  color: red;
  border: 2px solid red;
}
span {
  color: black;
}

CSS中，元素自身的直接样式优先级远高于继承来的样式——哪怕父元素li的颜色是红色，span因为有自己的color: black规则，所以会显示黑色。

2. 你的代码逻辑（jQuery添加内联样式） #

你通过$(".child").children().css(...)给li添加了内联的color: red，但没有给span设置任何颜色样式。此时span没有自身的直接color规则，就会按照CSS继承规则，继承父元素li的红色文本。

为什么看起来是“外部vs内联”的差异？ #

本质是你复现代码时遗漏了原示例中针对span的样式规则。不管是用外部样式表还是内联方式，只要span没有自己的color样式，就会继承父元素的颜色；反之如果给span设置了直接样式，就会覆盖继承值——和样式是外部还是内联无关。

验证方法 #

在你的代码中给span添加内联的color: black，就能得到和原示例一致的效果：

<span style="padding:10px; margin:10px; border:1px solid black; display:block; color:black">span (grandchild)</span>

或者用jQuery给span添加样式：

$(".child").children().css({
  "color": "red",
  "border": "2px solid red"
}).find("span").css("color", "black");

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