Giminystės ryšio selektoriai LESS įdėjimo metu
Panagrinėkime, kaip LESS kalboje, įdėjimo metu, pridėti įvairius selektorius, kurie parenka elementus pagal giminystės ryšį. Žiūrėkite pavyzdžius.
Pavyzdys
Dukterinis selektorius:
div {
> p {
color: red;
}
}
Kompiliavimo rezultatas:
div > p {
}
Pavyzdys
Gretimasis selektorius
div {
+ p {
color: red;
}
}
Kompiliavimo rezultatas:
div + p {
}
Pavyzdys
Giminystės selektorius:
div {
~ p {
color: red;
}
}
Kompiliavimo rezultatas:
div ~ p {
}
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;
}
}
}
