В this codepen есть селектор css &:hover
, что соответствует этому селектору?
Что выбирает селектор "&"?
Ответ 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