我正在使用 CSS/JS 构建一个旋钮,我在一个示例中偶然发现了一个 CSS 语法,我想在我的代码中重现它,但它似乎不起作用。我也尝试强制使用不同的 z-index
但没有成功。
这是有效的:
.knob
{
position: relative;
width: 100px; height: 100px;
border-radius: 50%;
background: gray;
transform: rotate(0deg);
}
.knob:before
{
content: '';
position: absolute;
width: 12px; height: 12px;
left: 44px; top: 12px;
border-radius: 50%;
background: white;
}
这就是我想要做的:
.knob
{
position: relative;
width: 100px; height: 100px;
border-radius: 50%;
background: gray;
transform: rotate(0deg);
&:before
{
content: '';
position: absolute;
width: 12px; height: 12px;
left: 44px; top: 12px;
border-radius: 50%;
background: white;
}
}
我相信它应该有相同的结果,但作为一个诚实的 CSS 新手,我不明白这是怎么回事。 Here's a CodePen with the full code.
最佳答案
该语法是SCSS 语法。你不能在你的 css 文件中写这样的代码。您可以设置从 SCSS 到 CSS 的编译,并将您的代码写入您的 SCSS 文件。
关于css - 使用 & 在类中嵌入伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54913888/