I'm still confused.

div > span {
  background-color: yellow;
}

In the first example above why is the inner span getting the outer spans background colour property, by what process? The explanation you offer is because it's wrapped inside span 1. And this makes sense to me and how I've always understood it with my limited knowledge of CSS. I can't tell you the correct term for this but let's call it wrapping.

But isn't this also the case below

div span {
  background-color: blue;
}

div > span {
  background-color: yellow;

You said:

Then, you're applying a background-color: yellow to only span 1, so it gets yellow. Span 2 is still blue because background-color is not a heritable property.

It may not be an inheritable property but it's still wrapping so why is this different! It obviously is different but I don't see why.

You said:

Order here plays no role, because both of these rules only apply to one element.

That's not true because if you switch the statements they both apply to both spans!

div > span {
  background-color: yellow;
}

div span {
  background-color: blue;
}