SASS įdėtumo giminiškumo selektoriai
Pažiūrėkime, kaip SASS, kuriant įdėtumus, pridėti įvairius selektorius, kurie parenka elementus pagal giminiškumą. Žiūrėkite pavyzdžius.
Pavyzdys
Dukterinis selektorius:
div {
> p {
color: red;
}
}
Kompiliavimo rezultatas:
div > p {
color: red;
}
Pavyzdys
Gretimasis selektorius
div {
+ p {
color: red;
}
}
Kompiliavimo rezultatas:
div + p {
color: red;
}
Pavyzdys
Giminiškasis selektorius:
div {
~ p {
color: red;
}
}
Kompiliavimo rezultatas:
div ~ p {
color: red;
}
Praktinės užduotys
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
ul {
color: red;
> li {
padding: 20px;
}
}
Paaiškinkite, koks bus šio kodo kompiliavimo rezultatas:
div {
ul {
> li {
padding: 20px;
}
}
}
