CSS继承在非直接子元素中的工作原理是怎样的？

没错，就是你说的这种链式传递的方式。

CSS的继承是沿着DOM树自上而下逐层传递的：

• 你给body设置font-size:15px后，这个属性会先传递给body的所有直接子元素——也就是h1、div、页面底部的<p>Social</p>；
• 接着div会把自己继承到的font-size值，继续传递给它的子元素，也就是里面的<p>Hello world</p>。

除非某个元素被单独设置了同名属性（比如给div写font-size:18px），否则它会一直把继承来的属性值往下传递。

你的示例代码 #

HTML代码：

<body>
  <h1>My website</h1>
  <div>
    <p>Hello world</p>
  </div>
  <p>Social</p>
</body>

CSS代码：

body {font-size: 15px;}

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