Почему не работает с &?

Question

[Алексей Романьков]

В общем, проблема решилась сама собой, но я не понимаю причину её возникновения.
Вот код:

<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>

вот 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;
   }
}

Почему при указании в 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;
   }

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

   &__3 {
      background-color: blue;
   }
}

цвет текста остаётся белым?

Answer 1

[iBird Rose]

а в инспекторе посмотреть сначала перед тем как писать тут не судьба?

перебиваются у тебя стили

Comments

[Алексей Романьков]

Ну вот я и пытаюсь понять, почему они перебиваются) .block__2 записан после div, разве значение не должно перезаписаться?

[iBird Rose]

Алексей Романьков, учи приоритеты в css
https://webref.ru/course/css-basics/priority
https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...

Answer 2

[Rsa97]

.block {
    .block__2 {
        ...
    }
}

Это селектор .block .block__2

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

Это селектор .block__2

Данные селекторы могут относиться к одним и тем же элементам, но имеют разную специфичность.