Подтвердить что ты не робот

Что выбирает селектор "&"?

В this codepen есть селектор css &:hover, что соответствует этому селектору?

4b9b3361

Ответ 1

Я считаю, что амперсанд - это Sass. Из документов:

Ссылка на родительские селектора: &

Иногда полезно использовать родительский селектор вложенных правил в других чем значение по умолчанию. Например, вы можете захотеть стили для того, когда этот селектор зависает или когда тело элемент имеет определенный класс. В этих случаях вы можете явно укажите, где родительский селектор должен быть вставлен с помощью & характер.

Ответ 2

Совершенно верно. В Сассе у вас может быть что-то вроде этого...

 div {
    background: green;

    p {
        background: red;

        &:hover {
            background: blue;
        }

        &:active {
           background: blue; 
        }
    }   
}

... который при преобразовании в CSS станет следующим:

div {
    background: green;
}

div p {
    background: red;
}

div p:hover {
    background: blue;
}

div p:active {
    blue;
}

Изменить: от & hover: до &: hover

Ответ 3

Одно использование, которое менее широко известно, вы можете добавить амперсанд в конец стиля, чтобы родительский селектор стал дочерним.

например:

 h3
   font-size: 20px
   margin-bottom: 10px

 .some-parent-selector &
   font-size: 24px
   margin-bottom: 20px

становится,

  h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .some-parent-selector h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

вы можете узнать больше и использовать здесь

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand