[英]Nesting SCSS pseudo selectors
I have this structure of pseudo elements:我有这种伪元素结构:
&::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;
}
As you can see, in first-child
and last-child
I only overwrite 2 properties, so, it seems to make it nested in &::before
, but I can't.如您所见,在first-child
和last-child
中,我只覆盖了 2 个属性,因此,它似乎使其嵌套在&::before
中,但我不能。 Also, on Internet, I haven't found, if it's possible.另外,在互联网上,如果可能的话,我还没有找到。
Everything works just find, I just want to know, if there is possibility to make this code look prettier.一切正常,我只想知道,是否有可能让这段代码看起来更漂亮。
You can separate them with commas and do not repeat them twice.您可以用逗号分隔它们,并且不要重复两次。
like this:像这样:
&:last-child:before , &:first-child:before {
content: '';
position: absolute;
height: 50%;
width: 1px;
background: ${(props) => props.theme.colors.link};
right: 6px;
top: 0;
}
Try this尝试这个
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.