Selektor efter släktskap i SASS-nästling
Låt oss titta på hur man i SASS vid nästling lägger till olika selektorer som väljer element efter släktskap. Se exemplen.
Exempel
Barnselektor:
div {
> p {
color: red;
}
}
Kompileringsresultat:
div > p {
color: red;
}
Exempel
Intilliggande granne selektor
div {
+ p {
color: red;
}
}
Kompileringsresultat:
div + p {
color: red;
}
Exempel
Syskonselektor:
div {
~ p {
color: red;
}
}
Kompileringsresultat:
div ~ p {
color: red;
}
Praktiska uppgifter
Berätta vad resultatet av kompileringen av följande kod blir:
ul {
color: red;
> li {
padding: 20px;
}
}
Berätta vad resultatet av kompileringen av följande kod blir:
div {
ul {
> li {
padding: 20px;
}
}
}
