[英]Nesting SCSS pseudo selectors
我有这种伪元素结构:
&::before {
content: '';
position: absolute;
height: 100%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
}
&:first-child:before {
content: '';
position: absolute;
height: 50%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
bottom: 0;
}
&:last-child:before {
content: '';
position: absolute;
height: 50%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
top: 0;
}
如您所见,在first-child
和last-child
中,我只覆盖了 2 个属性,因此,它似乎使其嵌套在&::before
中,但我不能。 另外,在互联网上,如果可能的话,我还没有找到。
一切正常,我只想知道,是否有可能让这段代码看起来更漂亮。
您可以用逗号分隔它们,并且不要重复两次。
像这样:
&:last-child:before , &:first-child:before {
content: '';
position: absolute;
height: 50%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
top: 0;
}
尝试这个
div {
&::before{
content: '';
position: absolute;
height: 100%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
}
&:first-child:before {
height: 50%;
bottom: 0;
}
&:last-child:before {
height: 50%;
top: 0;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.