How to mark up and style the picture tag?

Question

css

Good afternoon!

The question is certainly strange, but I realized that I don’t understand a little how it works ...
Let’s say I have a lot of conditions for different situations, in the tag picture:

<picture>
          <source type="image/webp" media="(min-width: 1200px)" srcset="img/[email protected], img/[email protected] 2x">
          <source type="image/webp" media="(min-width: 860px)" srcset="img/[email protected], img/[email protected] 2x">
          <source type="image/webp" srcset="img/[email protected], img/[email protected] 2x">
          <source media="(min-width: 1200px)" srcset="img/[email protected], img/[email protected] 2x">
          <source media="(min-width: 860px)" srcset="img/[email protected], img/[email protected] 2x">
          <img class="section__image" src="img/[email protected]" srcset="img/[email protected] 2x" alt="Фото">
        </picture>

And in the old fashioned way, I write a class for img, I access it through css and everything works, great! But why does everything work? After all, in different states, pre-prepared images should have been loaded ... It turns out that the given class on img can affect all other loaded ones source? Or does it have to be controlled somehow?