How to make css selectors with the same specificity be applied in order of HTML tags parenthood?

How to make css selectors with the same specificity be applied in order of HTML tags parenthood?

You can't. CSS simply doesn't work like that. If selectors have equal specificity then rules are applied in stylesheet order. You can't change that.

You might be able to achieve the effect you want with color: inherit on the links and setting the colours on the elements that are members of the classes.

It would probably be easier to set the classes on the anchors directly.

It can be achieved using CSS variables:

a {
  color: var(--link-color);
}
.style1 {
  --link-color: red;
}
.style2 {
  --link-color: green;
}

<div class="style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

This technology is supported by browsers widely already, and will get even wider support in future.