Svelte组件CSS样式未正确生效，求问题原因及解决方法

你的问题出在Svelte的样式作用域机制和CSS选择器的组合逻辑上：

1. 原CSS中，你通过.slider::before, .knob这个组合选择器给元素设置宽高、定位和旋转，但Svelte的作用域样式会给类名添加专属后缀（比如data-svelte-xxx），这可能导致组合选择器的解析优先级或匹配出现异常，最终.slider.knob元素本身没有正确获得宽高和position: relative属性，伪元素失去了定位上下文，无法正常显示。
2. 原CSS里.slider::before没有明确的定位坐标（top/left），依赖默认定位，但在作用域样式下，这个默认行为可能被干扰。

修复步骤： #

修改你的CSS代码，把元素本身的样式和伪元素样式分开，确保元素有明确的尺寸和定位上下文：

<div class="slider knob"></div>
<script>
</script>
<style>
/* 先给基础元素设置核心样式，确保作用域下能正确匹配 */
.slider.knob {
    width: 10em;
    height: 10em;
    position: relative;
    transform: rotate(calc(var(--rotation) * 1rad));
}

/* 旋钮主体伪元素 */
.slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(0deg, rgb(53, 53, 53) 0%, rgb(36, 36, 36) 100%);
    box-shadow:
        0px -20px 20px rgb(75, 75, 75),
        0px 20px 35px rgb(11, 11, 11),
        inset 0px 5px 6px rgb(100, 100, 100),
        inset 0px -5px 6px rgb(22, 22, 22);
}

/* 旋钮白点 */
.knob::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
}

/* 旋钮外圈 */
.knob::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 50%;
    border: 3px solid rgba(200, 200, 200, .5);
    background-color: transparent;
}
</style>

关键调整点： #

• 单独给.slider.knob组合选择器设置宽高、定位，确保元素本身有明确的尺寸和定位上下文，避免组合选择器在作用域下的匹配问题。
• 给所有伪元素明确添加content: ''和定位坐标，消除默认行为的不确定性。
• 拆分了原有的复合选择器，让每个样式规则的目标更清晰，避免样式覆盖或匹配异常。

内容的提问来源于stack exchange，提问作者Rory