我正在尝试(并且已成功)选择一个 div,它是子元素,它是伪前/后元素,使用以下语法,但我想知道是否有简化的方法?
经过一些研究,我发现以下 scss 适用于 html/scss(下面也有指向 JSFiddle 的链接):
HTML
想要添加一个 all-borders-hidden
类到 reveal-div
元素,这将生成 div 本身,它是子/子,并且两个伪元素都更新为没有边框:
<div class="reveal-div">
Parent Div
<div class="main-image-div">
Main Cild Div
</div>
</div>
控制
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
border: none;
}
&.all-borders-hidden *{
border: none;
}
&.all-borders-hidden::after{
border: none;
}
&.all-borders-hidden::before{
border: none;
}
}
最佳答案
你可以再次使用&
:
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
border: none;
* {
border: none;
}
&::after{
border: none;
}
&::before{
border: none;
}
}
}
如果他们共享border:none
,你可以这样做:
.reveal-div {
border: 2px solid black;
// I toggle the all-borders-hidden class on the parent/ancestor
// reveal-div class element
// The following works, but it's a bit verbose - can it be simplified
&.all-borders-hidden {
&,
*,
&::before,
&::after{
border: none;
}
}
}
关于css - 子伪元素的简化 SASS 选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46431176/