有没有办法可以从嵌套子中向父元素添加伪类。 仅使用CSS
示例:在.less文件中,这就是我所拥有的。
.collection {
// Some styling
.headingRow {
//Some styling
.heading{
//Some styling
// This is where i want it to add the styling for alternate .collection class
}
}
}
这就是我想要的输出
.collection:nth-of-type(2n+1) .headingRow .heading
{
background-color: #7a003d;
}
.collection:nth-of-type(2n) .headingRow .heading
{
background-color: #322f31;
}
这就是我试过的 - 从.heading类中添加&
,我可以使用像
.collection {
// Some styling
.headingRow {
//Some styling
.heading{
div&
// This results in div.collection .headingRow .heading { }
}
}
}
有没有办法可以将Pseudo类添加到父祖先?
答案 0 :(得分:7)
这样的事情:
.collection {
// ...
.headingRow {
// ...
}
}
.headingRow .heading {
.collection
& {background-color: red}
.collection:nth-of-type(2n)
& {background-color: blue}
.collection:nth-of-type(2n + 1)
& {background-color: green}
}
虽然我认为它没有任何方式比没有任何嵌套的普通旧CSS更好。