Why doesn't it work with &?

Question

css

In general, the problem was solved by itself, but I do not understand the reason for its occurrence.
Here is the code:

<div class="block">
         <div class="block__1">
            .block__1
         </div>
         <div class="block__2">
            .block__2
         </div>
         <div class="block__3">
            .block__3
         </div>
      </div>

here is the SCSS:

.block {
   div{
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      color: #fff;
   }
   border: 5px solid red;
   max-width: 800px;
   margin: 0px auto;
   height: 800px;
   &__1 {
      background-color: green;
   }

   .block__2 {
      background-color: yellow;
      color: black;
   }

   &__3 {
      background-color: blue;
   }
}

Why when specifying the second block in SCSS through &:

.block {
   div{
      line-height: 50px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      color: #fff;
   }
   border: 5px solid red;
   max-width: 800px;
   margin: 0px auto;
   height: 800px;
   &__1 {
      background-color: green;
   }

   &__2 {
      background-color: yellow;
      color: black;
   }

   &__3 {
      background-color: blue;
   }
}

does the text color stay white?

Answer 1

and in the inspector to look first before writing here is not fate?

your styles are messed up

Answer 2

.block {
    .block__2 {
        ...
    }
}

This is a selector.block .block__2

.block {
    &__2 {
        ....
    }
}

This is a selector .block__2
These selectors can refer to the same elements, but have different specificities .